如果另一個div有餘量，div將失去其全高

我需要所有div都是100％文檔高度。它的工作，直到他們有一些頂部邊緣。在這種情況下，剩餘的div將失去其全部高度。如果另一個div有餘量，div將失去其全高

如何將所有div的高度伸展到完整文檔高度，而不管它們中的任何一個的邊距如何？

* { 
 
    .margin: 0; 
 
} 
 
html { 
 
    background: red; 
 
    height: 100%; 
 
} 
 
body { 
 
    max-width: 1366px; 
 
    background: blue; 
 
    height: 100%; 
 
} 
 
#divleft { 
 
    float: left; 
 
    background: lightblue; 
 
    width: 40%; 
 
    height: 100%; 
 
} 
 
#divmiddle { 
 
    float: left; 
 
    margin-top: 25px; 
 
    background: lightgreen; 
 
    width: 40%; 
 
    height: 100%; 
 
} 
 
#divright { 
 
    float: right; 
 
    background: green; 
 
    width: 20%; 
 
    height: 100%; 
 
}

<div id='divleft'>left</div> 
 
<div id='divmiddle'>middle</div> 
 
<div id='divright'>right</div>

這裏是fiddle

來源

2016-12-10 bonaca

然後刪除邊距屬性。簡單 – Sankar

@SankarRaj，我需要這個保證金。 – bonaca

@bonaca你知道'calc（）'函數嗎？ –

你不一定需要height: 100%你的div是充滿高度。您可以使用CSS flexbox來實現此佈局，使div完全動態。

所有你需要的是在容器上的display: flex。

您可以擺脫所有浮動規則，不需要使用calc()。

html { 
 
    background: red; 
 
    height: 100%; 
 
} 
 
body { 
 
    display: flex; /* NEW */ 
 
    max-width: 1366px; 
 
    background: blue; 
 
    height: 100%; 
 
} 
 
#divleft { 
 
    background: lightblue; 
 
    width: 40%; 
 
} 
 
#divmiddle { 
 
    margin-top: 25px; 
 
    width: 40%; 
 
    background: lightgreen; 
 
} 
 
#divright { 
 
    width: 20%; 
 
    background: green; 
 
}

<div id='divleft'>left</div> 
 
<div id='divmiddle'>middle</div> 
 
<div id='divright'>right</div>

revised fiddle

柔性容器的初始設定是align-items: stretch。這意味着容器的子元素（又名「flex items」）將消耗橫軸中的空閒空間，在這種情況下，它是垂直/高度。

來源

2016-12-10 04:07:44

謝謝，解決了。 – bonaca

您可以使用CSS calc()功能，如：

#divmiddle{ 
    margin-top: 25px; 
    height: calc(100% - 25px); 
}

看一看下面的代碼片段（讓我知道這適用於你）：

html{ 
 
    background:red; 
 
    height:100%; 
 
} 
 
body{ 
 
    max-width:1366px; 
 
    background:blue; 
 
    height:100%; 
 
    margin: 0; 
 
} 
 
#divleft{ 
 
    float:left; 
 
    background:lightblue; 
 
    width:40%; 
 
    height:100%; 
 
} 
 
#divmiddle{ 
 
    float:left; 
 
    margin-top:25px; 
 
    background:lightgreen; 
 
    width:40%; 
 
    height:calc(100% - 25px); 
 
} 
 
#divright{ 
 
    float:right; 
 
    background:green; 
 
    width:20%; 
 
    height:100%; 
 
}

<body> 
 
    <div id='divleft'>left</div> 
 
    <div id='divmiddle'>middle</div> 
 
    <div id='divright'>right</div> 
 
</body>

希望這有助於！

來源

2016-12-10 03:58:27

@bonaca此解決方案適合您嗎？ –

根據其內容，某些div的高度發生了改變。預先計算（）沒有任何東西。 – bonaca

@bonaca但是，這會讓你的身高始終處於100％的高度，只需從總高度中減去'margin-top'值即可。這是獨立於你的div內的內容，看看。 –

剛剛從中間格刪除margin屬性..

#divmiddle{ 
    float:left; 
    background:lightgreen; 
    width:40%; 
height:100%; 
}

來源

2016-12-10 04:01:35

但我需要這個邊際，當然。 – bonaca

好吧，那麼你可以定義中間div邊緣爲margin-top：auto; –

你說什麼？請仔細閱讀你的評論。 – bonaca

您可以簡單地從高度中扣除保證金百分比。而不是height: 100%，請使用類似width: 98%; height: 98%; margin: 1%;或width: 23%; height: 23%; margin: 1%;等。

來源

2016-12-10 04:20:43

如果另一個div有餘量，div將失去其全高

回答

相關問題