Question

我遇到了简单的html / css技巧问题。

我想创建一个100％高度左栏的网站，例如宽度300px，在右侧，我想要与宽度的其余部分竞争div。

以下代码：

＆＃13;

html {min-height:100%; position relative;}
body {margin:0px; height:100%;}
.left-bar {position:absolute; width:100px; background:#f8e8bc; top:0; bottom:0; left:0; right:0; overflow:hidden;}
.contener {float:right; right:0px; width: calc(100% - 100px); height:100%; background:#eee;}
.box {margin:auto; width:150px; height:500px; overflow:hidden; border:1px solid #ccc;}

＆＃13;

<html>
  <body>
    <div class="left-bar"></div>
      <div class="contener">
       <div class="box"></div>
    </div>
  </body>
</html>

＆＃13;

Answer 1

使用position: fixed代替absolute。

Answer 2

首先，您在html的CSS中输入了拼写错误。您缺少:，添加它将解决问题。如果希望内部框控制大小，还需要删除min-height声明：

＆＃13;

html {
  position: relative;
}

body {
  margin: 0px;
  height: 100%;
}

.left-bar {
  position: absolute;
  width: 100px;
  background: #f8e8bc;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.contener {
  float: right;
  right: 0px;
  width: calc(100% - 100px);
  height: 100%;
  background: #eee;
}

.box {
  margin: auto;
  width: 150px;
  height: 500px;
  overflow: hidden;
  border: 1px solid #ccc;
}

＆＃13;

<div class="left-bar"></div>
<div class="contener">
  <div class="box"></div>
</div>

＆＃13;

顺便说一句，你可以简单地使用下面的flexbox。由于默认情况下项目的默认对齐方式是拉伸，因此您将获得所需的布局。

＆＃13;

body {
  margin: 0px;
  display: flex;
}

.left-bar {
  width: 100px;
  background: #f8e8bc;
}

.contener {
  flex: 1;
  background: #eee;
}

.box {
  margin: auto;
  width: 150px;
  height: 500px;
  overflow: hidden;
  border: 1px solid #ccc;
  box-sizing: border-box:
}

＆＃13;

<div class="left-bar"></div>
<div class="contener">
  <div class="box"></div>
</div>

＆＃13;

全高div不起作用

2 个答案: