在页面底部制作一个div [英] Make a div to the bottom of the page

问题描述

我希望 main-content-root 进入页面底部。不会更短，也不会更长。我寻找一个解决方案，其中 main-content-root 之前的div没有改变。只有css偏好。
因为菜单的高度可能有所不同，所以我添加了一些简单的代码来改变菜单的高度。

 < div class =root> 
< div class =menu> 
菜单
< / div> 
 
< div class =main-content-root> 
< div class =content> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
滚动内容< br /> 
< / div> 
< / div> 
< / div> 
 
 
 body {
 height：100％; 
宽度：100％; 
} 
 
 .root {
 position：fixed; 
 top：100px; 
 height：200px; 
宽度：100％; 
} 
 
 .menu {
 background-color：red; 
} 
 
 .main-content-root {
 position：relative; 
 overflow-y：scroll; 
 
 $ b $ .content {
 
} 
 
 
 setInterval（function（）{$（。menu）） .css（height，Math.random（）* 200）}，1000）; 
  

解决方案

Flex可以在这里使用：不要犹豫打开snippet un full page and play around resizing window：）

html，/ * 100％从widow的高度继承，然后级联将把它带到.rrot * / body，.root {height：100％;宽度：100％; margin：0;}。root {display：flex; flex-flow：column;} .menu {background-color：red; height：50px; / * 200在片段中显示太多...... * /}。main-content-root {flex：1; overflow：auto;}

 < div class =root > < div class =menu>菜单< / div> < div class =main-content-root> < div class =content>滚动内容< br />滚动内容< br />滚动内容< br />滚动内容< br />滚动内容< br />滚动内容< < br />滚动内容< br />滚动内容< br />滚动内容< br />滚动内容< br>滚动内容< br />滚动内容<滚动内容< br />滚动内容< br />滚动内容< br />滚动内容>滚动内容>滚动内容< br / >滚动内容< br />滚动内容< br>滚动内容< br />滚动内容< br />滚动内容< br />滚动内容< br />滚动内容< br />滚动内容< br />滚动内容< br />滚动内容< br />滚动内容< < br />滚动c intent< br />滚动内容< br />滚动内容< br />滚动内容< br />滚动内容< br>滚动内容< br /峰; br /> < / DIV> < / div>< / div>  

I want the main-content-root to go to the bottom of the page. Not shorter and not longer. I look for a solution where the divs before main-content-root are not altered. Only css prefered. Because the menu can vary in height I added some simple code that changes the height of the menu.

<div class="root">
  <div class="menu">
    menu  
  </div>

  <div class="main-content-root">
      <div class="content">
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      scroll content<br/>
      </div>
  </div>
</div>


body {
  height: 100%;
  width: 100%;
}

.root {
  position: fixed;
  top: 100px;
  height: 200px;
  width: 100%;
}

.menu {
  background-color: red;
}

.main-content-root {
  position: relative;
  overflow-y: scroll;
}

.content {

}


setInterval(function() {$(".menu").css("height", Math.random()*200)}, 1000);

解决方案

Flex can be used here : do not hesitate to open snippet un full page and play around resizing window :)

html,/* 100% inherited from widow's height , then the cascade will take it to .rrot */
body,
.root{
  height: 100%;
  width: 100%;
  margin: 0;
}
.root {
  display: flex;
  flex-flow: column;
}
 
.menu {
  background-color: red;
  height: 50px; /* 200 is too much to show in snippet ... */
}
.main-content-root {
  flex: 1;
  overflow: auto;
}

<div class="root">
  <div class="menu">
    menu
  </div>

  <div class="main-content-root">
    <div class="content">
      scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>
    </div>
  </div>
</div>

这篇关于在页面底部制作一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！