Question

我正在制作一个网页，其中有两个固定的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>

使div占用不超过剩余空间

2 个答案: