菜单和内容div左侧带有粘性页脚 - ＆gt;身高100％

Question

我为社区提出了一个很好的问题。

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我的问题是： 我需要#contenu占据所有的位置。 但！内容是动态的;）

当我获得完整内容时，它运作良好，但如果我缩小...爆炸！

我绝对需要float left和#menu #contenu #menu原因<TextView android:id="@+id/textpage" android:textAlignment="center" android:layout_marginLeft="@dimen/book_page_text_view_margin" android:layout_marginRight="@dimen/book_page_text_view_margin" android:gravity="bottom|center_horizontal" android:text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. " android:textColor="#050505" android:textSize="16sp" android:layout_height="match_parent" android:layout_width="match_parent" local:MvxBind="Text PageText" android:layout_marginBottom="2dp" android:layout_marginTop="20dp" android:shadowColor="#ffffff" android:shadowDx="-1" android:shadowDy="-1" android:shadowRadius="3" android:textStyle="bold" android:fadingEdge="horizontal" android:scrollHorizontally="true" /> 可以通过按钮点击事件折叠。

我可以把代码放到崩溃中，但它适用于这个状态......

谢谢大家

Answer 1

请参阅修改代码。据我了解你的要求，你需要两个部分的高度相等。现在两个部分的高度都相等。如果我错了，请纠正我。

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;