Question

保持简短，我希望名为#left的灰色div扩展内容#content。我不想使用位置：固定，因为它在移动设备上看起来很讨厌。我已经搜索了几个小时，我无法相信我发现它很难解决这个问题。

谢谢。

body {
    height: 100%;
}
#wrapper {
    height: 100%;
}
#left {
    background-color: #ecf0f1;
    background-image: none;
    height: 100%;
    position: absolute;
    top: 0;
    width: 35%;
}
#content {
    margin-left: 38%;
    font-size: 4vw;
    max-width: 50%;
    height: 100%;
    position: absolute;
}

Answer 1

Flexbox可以做到这一点。

＆＃13;

body,
html {
  min-height: 100%;
}
#wrapper {
  height: 100%;
  display: flex;
}
#left {
  background-color: #ccc;
  width: 35%;
}
#content {
  font-size: 4vw;
  max-width: 50%;
}

＆＃13;

<div id="wrapper">
  <div id="left"></div>
  <div id="content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</div>
</div>

＆＃13;

顺便说一句，绝对定位是一种非常糟糕的网页布局方法。它极不灵活，有更好，更灵敏的选择。查看LearnLayout.com

需要左侧div来垂直填充文本（不使用固定）

1 个答案: