如何讓div填充剩餘空間？

內容中有背景圖片。我希望圖像填充頁眉和頁腳之間的剩餘空間。有div的內容div的孩子與圖像，有時會有內容和其他時間不會。

HTML：

<body> 
<div id='main'> 
    <div id='header'> 
     <div id='logoCompany'> 
      <img class='headerGraphics' src='Graphics\logo smaller.jpg'><img class='headerGraphics' src='Graphics\Marvelous Header3 small.png'> 
     </div> 
    </div> 
    <div id='contentParent' class='floatClear'> 
     <div id='content' style = "text-align: center;"> 
      <div id='leftPane'> 
       Left Col 
      </div> 
      <div id='rightPane'> 
       Right Col 
      </div> 
     </div> 
    </div> 
    <div id='footer'> 
    Footer  
    </div> 
</div> 
</body>

CSS：

* { 
    margin: 0px; 
} 
.floatClear { 
    clear: both; 
} 

.headerGraphics { 
    display: inline; 
} 

#header { 
    background: #023489; 
    text-align: center; 
} 

#logoCompany { 
    display: inline; 
} 
#contentParent {  
    height: 373px; 
    width: 100%; 
    background-image: url(../Graphics/background.jpg); 
} 
#leftPane { 
    background: yellow; 
    float: left; 
    margin: 100px 0 0 10%; 
    opacity: .5; 
    width:40%; 
}  
#rightPane { 
    background: green; 
    float: right; 
    margin: 100px 10% 0 0; 
    opacity: .5; 
    width:40%; 
} 
#footer { 
    width:100%; 
}

我試過高度：100％，但我懷疑這會失敗，且不內容。事實上，我認爲這就是爲什麼一切都失敗，除非我硬編碼一個高度。但由於明顯的原因，這不是一個好的解決方案。

Here's an example

任何人有任何想法如何使這項工作？

編輯：我試圖改變這樣的：

#contentParent {  
    height: 373px; 
    width: 100%; 
    background-image: url(../Graphics/background.jpg); 
}

這樣：

#contentParent {  
    flex: 1; 
    background-image: url(../Graphics/background.jpg); 
}

但縮水DIV孩子div的尺寸，使事情變得更糟..

來源

2017-04-22 Fred

這是一個解決方案，它定義頁眉，頁腳和#contentParent as position: fixed並給出#contentParent 100％高度減去頁眉和頁腳的高度（在本例中= 80px--這取決於您自己的設置）。

#contentParent內部必須添加任何其他內容 - 該元素將隨後滾動，因爲它具有overflow-y:auto;。由於頁眉和頁腳的絕對位置，頁眉和頁腳將始終保留在屏幕上，因爲#contentParent的頂部和底部邊距與頁眉和頁腳的高度相等，因此不會覆蓋內容的任何部分。

背景圖像將cover#contentParent完整，不會滾動diue到background-attachment: fixed（集成在快捷background屬性）

html, 
 
body, 
 
#main { 
 
    height: 100%; 
 
    margin: 0px; 
 
} 
 

 
.floatClear { 
 
    clear: both; 
 
} 
 

 
.headerGraphics { 
 
    display: inline; 
 
} 
 

 
#header { 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 40px; 
 
    background: #023489; 
 
    text-align: center; 
 
} 
 

 
#logoCompany { 
 
    display: inline; 
 
} 
 

 
#contentParent { 
 
    position: fixed; 
 
    height: calc(100% - 80px); 
 
    width: 100%; 
 
    overflow-Y: auto; 
 
    margin: 40px 0; 
 
    background: url(http://placehold.it/1500x800/fc7) center center no-repeat; 
 
    background-position: fixed; 
 
    background-size: cover; 
 
} 
 

 
#leftPane { 
 
    background: yellow; 
 
    float: left; 
 
    margin: 100px 0 0 10%; 
 
    opacity: .5; 
 
    width: 40%; 
 
} 
 

 
#rightPane { 
 
    background: green; 
 
    float: right; 
 
    margin: 100px 10% 0 0; 
 
    opacity: .5; 
 
    width: 40%; 
 
} 
 

 
#footer { 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 40px; 
 
    width: 100%; 
 
    background: lightblue; 
 
}

<body> 
 
    <div id='main'> 
 
    <div id='header'> 
 
     <div id='logoCompany'> 
 
     <img class='headerGraphics' src='Graphics\logo smaller.jpg'><img class='headerGraphics' src='Graphics\Marvelous Header3 small.png'> 
 
     </div> 
 
    </div> 
 
    <div id='contentParent' class='floatClear'> 
 
     <div id='content' style="text-align: center;"> 
 
     <div id='leftPane'> 
 
      Left Col 
 
     </div> 
 
     <div id='rightPane'> 
 
      Right Col 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div id='footer'> 
 
     Footer 
 
    </div> 
 
    </div> 
 
</body>

來源

2017-04-22 23:55:24 Johannes

您可以使用flexbox來做到這一點，

這裏是一個簡化版本你的代碼。

body { 
 
    margin: 0 
 
} 
 

 
#main { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100vh 
 
} 
 

 
#header, 
 
#footer { 
 
    background: green; 
 
    padding: 10px; 
 
} 
 

 
#contentParent { 
 
    flex: 1; 
 
    background: red; 
 
} 
 

 
#content { 
 
    display: flex; 
 
    justify-content:center; 
 
    align-items:center; 
 
    height:100% 
 
}

<div id='main'> 
 
    <div id='header'> 
 
    <div id='logoCompany'> 
 
     Logo Name 
 
    </div> 
 
    </div> 
 
    <div id='contentParent'> 
 
    <div id='content'> 
 
     <div id='leftPane'> 
 
     Left Col 
 
     </div> 
 
     <div id='rightPane'> 
 
     Right Col 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div id='footer'> 
 
    Footer 
 
    </div> 
 
</div>

來源

2017-04-22 22:34:05 dippas

的Flex並沒有爲我工作。 – Fred

在片段上完美工作。最新的問題是什麼？ – dippas

-1

不知道如果我理解正確你的問題，但如果你想顯示拉伸圖像在整個屏幕上，您可以使用CSS標籤：

background-size: cover;

你可以在這裏閱讀更多關於css tag

來源

2017-04-22 22:34:45

已經嘗試過。我再次嘗試它，它不能增加div的大小。 – Fred

如何讓div填充剩餘空間？

回答

相關問題