全屏CSS版块布局

Question

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

整个浏览器窗口应填充“已知”高度的唯一两个元素，即白色块顶部，左侧和底部，左侧（对于两个标签，因此已知将相对于字体）。其他所有东西都应该随浏览器窗口缩放，即左边的条宽15％，右边85％等等。

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

有人可以帮我吗？

Answer 1

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

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

所以，你可以开始工作的一点基础。

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

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我认为这就是你想要的。不过不确定。

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

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

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

修改：感谢@Paulie_D评论，添加calc()替换了box-sizing: border-box。

Answer 3

我试图快速复制：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;