如何使div覆盖屏幕的所有区域(固定div覆盖的区域除外)?

时间:2018-07-17 07:57:35

标签: html css

同时以两个div并排放置第二个div在第一个div的宽度之后开始时遇到了问题。我不想使用overflow: hidden,因为我想在第一段之后的第二段开始。这是我想要实现的。 enter image description here

1 个答案:

答案 0 :(得分:4)

我认为您没有像图片中所示的那样<div>。但是我有一个建议。下面div中的两个元素都是矩形。但是内容的行为就像您绘制的一样。

您可以查找CSS基础知识here

div{
  margin: 0;
  background: green;
}
.small{
  float:left;
  width:20%;
  height: 100px;
  background: yellow;
}
  <div class="small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</div>
  <div class="big">Aenean euismod eros et erat pharetra, at elementum odio suscipit. Cras a enim quis diam molestie sollicitudin eget ac est. Proin porta turpis a massa porta laoreet. Fusce semper facilisis erat nec suscipit. Aliquam gravida quis dui sed aliquet. Ut consequat ullamcorper volutpat. Cras neque tortor, pharetra id condimentum nec, accumsan ac ipsum.

Etiam sit amet convallis ante. In pulvinar eu erat eu fringilla. Nam scelerisque eget ligula a blandit. Nullam eu tortor augue. Nulla at eros arcu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque eget tincidunt massa. Sed dictum faucibus risus ac varius. Praesent aliquet erat tortor, sed lacinia metus fermentum non. Nulla vitae sapien dui. Vestibulum sed urna quis ex dictum scelerisque id ut erat. Cras efficitur ligula eu neque pellentesque, eget posuere lacus aliquet. Pellentesque interdum at sem vitae aliquet. Donec cursus, elit et varius viverra, urna erat commodo sem, ac congue erat augue eget ex. Suspendisse posuere sem at tempor faucibus. Aliquam erat volutpat.

Curabitur aliquam feugiat tortor vitae blandit. Quisque faucibus urna arcu, sed rhoncus quam rutrum scelerisque. Aliquam pulvinar condimentum accumsan. Etiam lorem nibh, porta vitae mauris sit amet, egestas interdum lectus. Proin sit amet dolor purus. Nunc sed sem sed purus sagittis congue iaculis sed mauris. Donec pellentesque ut dolor rhoncus iaculis. Donec quis magna accumsan turpis convallis dignissim. Integer vel nisl accumsan, ultrices augue ut, placerat eros. Phasellus eu lacinia elit, nec maximus dui.
</div>