Question

我有一个相当简单的问题我认为这是常见的问题但是我无法在stackoverflow上找到解决方案。

我有一个3分区，中间位置是绝对的，所以最后一个div浮在上面。我怎样才能使最后一个div尊重第二个内容。我不能使用固定的高度，因为如果浏览器调整大小，那将无法工作。

＆＃13;

.box1{
  width: 20px;
  height: 20px;
  background-color: green;
  margin: 10px auto;
}

.box2{
  width: 20px;
  height: 20px;
  background-color: blue;
  margin: 10px auto;
  left: 0px;
  right: 0px;
  position: absolute; 
}

.box3{
  width: 20px;
  height: 20px;
  background-color: green;
  margin: 10px auto;
}

＆＃13;

<div class="wrapper">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

＆＃13;

https://jsfiddle.net/vuyrbbpf/

我想这样Div3尊重有内容div2就位而不是漂浮在它上面

Answer 1

<强>更新

正如@leandro指出的那样，页脚和内容底部之间的空格是空白。通过为页脚分配position: fixed

来修复它

<强>更新

根据新信息，我制作了一个基于弹性框的布局，看起来与this image具有相同的性质。我冒昧地更改底部框，box3作为页脚，中间box2作为内容框垂直滚动，而标题box1和页脚box3是<{1}}和position:fixed。

absolute

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-width: 100vw;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
}
.wrapper {
  min-width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: space-around;
  overflow: hidden;
}
.box1 {
  width: 100%;
  min-height: 40px;
  background-color: red;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}
.box2 {
  width: 100%;
  min-height: 100vh;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  bottom: 40px;
  background-color: blue;
  padding-bottom: 80px;
}
.box3 {
  width: 100%;
  min-height: 40px;
  margin-top: 40px;
  background-color: green;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
}

在<div clas="wrapper"> <div class="box1">BOX1 HEADER</div> <div class="box2"> <h1>START of CONTENT</h1> <h1>CONTENT</h1> <h1>CONTENT</h1> <h1>CONTENT</h1> <h1>CONTENT</h1> <h1>CONTENT</h1> <h1>CONTENT</h1> <h1>CONTENT</h1> <h1>CONTENT</h1> <h1>CONTENT</h1> <h1>CONTENT</h1> <h1>CONTENT</h1> <h1>CONTENT</h1> <h1>CONTENT</h1> <h1>CONTENT</h1> <h1>CONTENT</h1> <h1>CONTENT</h1> <h1>CONTENT</h1> <h1>CONTENT</h1> <h1>CONTENT</h1> <h1>CONTENT</h1> <h1>CONTENT</h1> <h1>CONTENT</h1> <h1>CONTENT</h1> <h1>CONTENT</h1> <h1>CONTENT</h1> <h1>CONTENT</h1> <h1>CONTENT</h1> <h1>CONTENT</h1> <h1>CONTENT</h1> <h1>CONTENT</h1> <h1>CONTENT</h1> <h1>CONTENT</h1> <h1>CONTENT</h1> <h1>CONTENT</h1> <h1>CONTENT</h1> <h1>END of CONTENT</h1> </div> <div class="box3">BOX3 FOOTER?</div> </div> .wrapper ...
...在垂直方向是display: flex ...
...安排flex-items（20x20px盒子），它们之间的间距均匀flex-direction: column

align-items: space-between

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: space-between;
  }

.box1{
  width: 20px;
  height: 20px;
  background-color: red;
  margin: 10px auto;
}
.box2{
  width: 20px;
  height: 20px;
  background-color: blue;
  margin: 10px auto; 
}
.box3{
  width: 20px;
  height: 20px;
  background-color: green;
  margin: 10px auto;
}

绝对位置没有高度

1 个答案: