CSS块布局全屏

Question

能喜欢做的屏幕布局的大致是这样的：

整个浏览器窗口应填充为白色区块“已知的”高度只有两个元素顶部，左侧和底部，左侧（对于两个标签，因此已知将相对于字体）。一切应与浏览器窗口缩放，即左边栏是15％宽，右边85％，等等。

作为一个C++开发者我的直觉这里是处理在Javascript中的事件和对DOM的代码，但我”我觉得这对CSS来说相对来说不重要。

任何人都可以帮助我吗？

Answer 1

我试图快速重现：

* { 
 
    box-sizing: border-box; 
 
} 
 
html, 
 
body, 
 
.wrapper { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.left, 
 
.right { 
 
    float: left; 
 
} 
 
.left { 
 
    position: relative; 
 
    width: 15%; 
 
    height: 100%; 
 
} 
 
.left .label-top, 
 
.left .label-bottom { 
 
    position: absolute; 
 
    width: 100%; 
 
    background-color: #fff; 
 
} 
 
.left .label-top { 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.left .label-bottom { 
 
    bottom: 0; 
 
    left: 0; 
 
} 
 
.left .content, 
 
.left .top, 
 
.left .bottom { 
 
    border: 1px solid white; 
 
} 
 
.left .top, 
 
.left .bottom { 
 
    height: 5%; 
 
    background-color: gray; 
 
} 
 
.left .content { 
 
    height: 30%; 
 
    background-color: #a09898; 
 
} 
 
.right { 
 
    width: 85%; 
 
    height: 100%; 
 
    background-color: gray; 
 
} 
 
.right::after { 
 
    content: ''; 
 
    display: table; 
 
    clear: both; 
 
}

<div class="wrapper"> 
 
    <div class="left"> 
 
    <div class="label-top">Label</div> 
 
    <div class="top"></div> 
 
    <div class="content"></div> 
 
    <div class="content"></div> 
 
    <div class="content"></div> 
 
    <div class="bottom"></div> 
 
    <div class="label-bottom">Label</div> 
 
    </div> 
 
    <div class="right"></div> 
 
</div>

Answer 2

对于布局，请考虑使用定位和显示属性。有很多方法可以创建动态结构，确保响应。

有关详细信息，请参阅this question and answer了解创建网站时可能会考虑的一些“常规”规则。

.left { 
 
    position: absolute; 
 
    lefT: 0; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 15%; 
 
    background: lightgray; 
 
} 
 
.right { 
 
    position: absolute; 
 
    left: 15%; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 85%; 
 
    background: dimgray; 
 
} 
 
.left .fixedBlock { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 50px; 
 
    background: blue; 
 
} 
 
.left .filledDiv { 
 
    height: calc(100% - 100px); 
 
    background: tomato; 
 
} 
 
.left .filledDiv .third { 
 
    height: 33.33%; 
 
    background: rgba(0, 0, 0, 0.2); 
 
} 
 
.left .filledDiv .third:nth-child(2) { 
 
    background: rgba(0, 0, 0, 0.4); 
 
}

<div class="left"> 
 
    <div class="fixedBlock">fixed height</div> 
 
    <div class="filledDiv"> 
 
    <div class="third">dynamic height</div> 
 
    <div class="third">with children</div> 
 
    <div class="third">a third of its heigth</div> 
 
    </div> 
 
    <div class="fixedBlock">also fixed height</div> 
 

 
</div> 
 
<div class="right">right side - open me in full screen!</div>

Answer 3

所以，有点基础，你就可以开始在上面工作。

为固定高度，我用vh，它真的取决于你想支持哪些浏览器：vh support

否则，您可以使用父母或身体的height: 100%。

.left-bar { 
 
    width: 15%; 
 
    background-color: red; 
 
    float: left; 
 
    height: 100vh; 
 
    border-right: 5px solid black; 
 
} 
 

 
.right-window { 
 
    width: 85%; 
 
    float: left; 
 
    height: 100vh; 
 
    background-color: pink; 
 
    
 
} 
 
* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
}

<div class="left-bar"> 
 
</div> 
 
<div class="right-window"> 
 
</div>

我想这是你想要的。但不知道。

这实现了完整的浏览器填充。

如果您发现宽度有calc()从边框中移除5px，如果您愿意，可以将其删除并仅放置15%。

我想你只是想要一个基础结构，这是一个非常简单的结构，你必须爱我的颜色选择技巧。

编辑：替换calc()加入box-sizing: border-box感谢@Paulie_D评论。