使div不超过剩余空间

Question

我正在制作一个网页，并且有2个固定div的一个用于标题，一个用于屏幕左侧的控制栏。标题div是50px高，100％宽，侧控制栏是100％高，50px;广泛与top:50px;设置为它和bottom 0px;设置为它似乎工作正常，但不会关闭页面，但我还不确定，但真正的问题是，当我尝试放置占用剩余屏幕空间的div时，比屏幕空间...所以它不能离开屏幕或固定的div后面，但它离开屏幕底部如何修复这是有可能的，如果你想知道here是目前为止的页面

Answer 1

我建议不要使用position:fixed，因为它有移动设备不能正确显示的问题（请阅读更多：link）。相反，我建议在全尺寸的容器使用position:absolute;，然后让你的 “内容” 使用overflow:auto;

HTML

<div id="content"> 
    <div id="top-bar"> 

    </div> 
    <div id="control-bar"> 

    </div> 
    <div id="main-content"> 

    </div> 
</div> 

CSS

#content{ 
    position: absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    overflow:hidden; 
} 
#top-bar{ 
    position:absolute; 
    left:0; 
    top:0; 
    height:50px; 
    right:0; 
    background-color:blue; 
} 
#control-bar{ 
    position:absolute; 
    top:50px; 
    bottom:0; 
    left:0; 
    width:50px; 
    background-color:red; 
} 
#main-content{ 
    position:absolute; 
    top:50px; 
    left:50px; 
    right:0; 
    bottom:0; 
    overflow:auto; 
    background-color:yellow; 
} 

JSFIDDLE

Answer 2

使用flexbox进行布局，并使用flex-grow使元素占用可用空间，而不会重叠或进行任何操作。

* {margin:0;padding:0;box-sizing:border-box;} 
 
body,html { 
 
    min-height: 100vh; 
 
} 
 
body { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
header { 
 
    background: #333; 
 
    min-height: 50px; 
 
    border-bottom: 1px solid black; 
 
} 
 
div { 
 
    display: flex; 
 
} 
 
aside { 
 
    width: 50px; 
 
    background: #222; 
 
} 
 
.grow { 
 
    flex-grow: 1; 
 
    flex-basis: 0; 
 
    background: #555; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header></header> 
 
<div class="grow"> 
 
    <aside></aside> 
 
    <main class="grow"></main> 
 
</div>