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

因此，您可以在此基础上开始工作。

作为固定高度，我使用了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%。

我认为你只想要一个基本结构，这是一个非常简单的结构，你一定会喜欢我的颜色挑选技巧。

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

Answer 3

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

有关更多详细信息，请参阅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>