javascript - HTML 和 CSS : How to lay out a div tag with width:100% and left:300px

Question

我在设置 div 标签的样式时遇到问题。我想要一个从 left:300px 开始并跨越到浏览器屏幕末尾的 div 标签。但是如果我设置 width:100%，div 标签将超出浏览器屏幕。

Answer 1

只要用对了。

div {
  position: absolute;
  left: 300px;
  right: 0;
}

https://jsfiddle.net/v2qq0gyp/1/

您也可以对顶部和底部执行此操作，从而生成整页 div:

div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

相对位置:

div {
    position: relative;    
    left: 30%;
    right: 0;    
    margin-right: 30%;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In erat urna, interdum non velit id, fringilla tempus lectus. Integer fermentum est in nisi lobortis aliquet. Sed rutrum purus purus, non fermentum nulla volutpat id. In lacus lacus, condimentum ut sollicitudin id, finibus et sem. Nulla magna elit, sagittis vitae tortor eu, tempor placerat elit. Fusce fringilla quam in erat commodo, eget vehicula tellus eleifend. Donec vitae nisi urna.

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In erat urna, interdum non velit id, fringilla tempus lectus. Integer fermentum est in nisi lobortis aliquet. Sed rutrum purus purus, non fermentum nulla volutpat id. In lacus lacus, condimentum ut sollicitudin id, finibus et sem. Nulla magna elit, sagittis vitae tortor eu, tempor placerat elit. Fusce fringilla quam in erat commodo, eget vehicula tellus eleifend. Donec vitae nisi urna.
</div>