我对社区提出了一个很好的问题。
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
min-height: 100%;
}
#container {
width: 100%;
min-height: 100%;
height: auto !important;
margin: 0 auto -65px;
}
#header {
width: 100%;
height: 70px;
background-color: red;
}
#menu {
float: left;
width: 20%;
min-width: 220px;
color: #ffffff;
margin: 130px 0 0 4%;
}
#contenu {
float: left;
width: 66%;
margin: 0;
padding: 2% 5%;
background: #ffffff;
/* Need this div to take 100% */
min-height: 100%;
height: auto !important;
}
body {
background-color: black;
color: #ffffff;
}
#container_footer {
width: 100%;
height: 65px;
background-color: black;
}
<div id="container">
<div id="header">
<div id="entete">
<p>Some Text</p>
</div>
</div>
<div id="menu">
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
</div>
<div id="contenu">
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</div>
</div>
<div id="container_footer">
<div id="footer">
<p>some text</p>
</div>
</div>
我的问题是:
我需要
#contenu
来放置所有页脚。但!内容是动态的;)
当我获得全部内容时,它可以很好地工作,但是如果我缩小,则爆炸!
我绝对需要
float left
的#menu
和#contenu
原因,可以通过按钮单击事件将其折叠。我可以将代码放到折叠中,但是它可以在这种状态下工作,所以...
谢谢你们
最佳答案
请参阅修改代码。据我了解您的要求,您需要两个部分的高度相等。现在两个部分的高度将相等。如果我错了,请纠正我。
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
min-height: 100%;
}
#container {
width: 100%;
min-height: 100%;
height: auto !important;
margin: 0 auto;
}
#header {
width: 100%;
height: 70px;
background-color: red;
}
.table-display{
display:table;
width: 100%;
}
#menu {
width: 20%;
color: #ffffff;
display: table-cell;padding: 20px;background:#57ad68;
}
#contenu {
display: table-cell;
padding: 20px;
background: #ffffff;
color:#000;
}
body {
background-color: black;
color: #ffffff;
}
#container_footer {
width: 100%;
height: 65px;
background-color: black;
}
<div id="container">
<div id="header">
<div id="entete">
<p>Some Text</p>
</div>
</div>
<div class="table-display">
<div id="menu">
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
</div>
<div id="contenu">
<div style="min-height:550px;">
<p>Your Content</p><p>Your Content</p><p>Your Content</p><p>Your Content</p><p>Your Content</p><p>Your Content</p><p>Your Content</p><p>Your Content</p><p>Your Content</p><p>Your Content</p><p>Your Content</p><p>Your Content</p><p>Your Content</p><p>Your Content</p><p>Your Content</p>
</div>
</div>
</div>
</div>
<div id="container_footer">
<div id="footer">
<p>some text</p>
</div>
</div>