CSS 块布局全屏

Question

想制作大致如下的屏幕布局：

整个浏览器 window 应该填充只有 "known" 高度的两个元素，即顶部、左侧和底部、左侧的白色块（对于两个标签，因此已知将相对于一种字体）。其他所有内容都应随浏览器缩放 window，即左侧栏宽 15%，右侧栏宽 85%，等等

作为一名 C++ 开发人员，我的直觉是处理 Javascript 中的事件并针对 DOM 编写代码，但我感觉这对于 CSS 来说相对微不足道。

谁能帮帮我？

Answer 1

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

有关更多详细信息，请参阅以了解您在创建网站时可能会考虑的一些 'general' 规则。

.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 2

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

作为固定高度，我使用了 vh，这实际上取决于您要支持的浏览器：vh support

否则你可以使用 parent 或 body 的 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

我试图快速重现 :

* {
  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>

CSS 块布局全屏

CSS block layout full screen

css

layout