Question

我在设置div标签的样式时遇到问题。我想从左边开始有一个div标签：300px并跨越直到浏览器屏幕的末尾。但是如果我把宽度：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>

Answer 2

您还可以在宽度上使用calc。

示例：

div {
 position: absolute;
 left: 300px;
 width: calc(100% - 300px);
}

根据评论...... Here's不是所有浏览器都无法使用它。

Answer 3

这里有很多过度的解决方案。

div是一个块元素，它自然地扩展到它的父级全横向宽度。这意味着您只需要从左侧稍微推动它作为最小解决方案，并且根据包含的元素，它将开箱即用。将一个类添加到div以获得最佳实践并使用：

.class {
  width: auto; // is default
  margin-left: 300px;
}

Answer 4

使用JQuery

$('.elementClass').width($(window).width()-300);

Answer 5

另一种选择是使用left作为％

left: 30%;
width: 70%;

Answer 6

我相信你可以通过添加＆＃39; padding-left＆＃39;或者＆＃39; margin-left＆＃39;而不是＆＃39; left＆＃39;。并且不要指定宽度：100％＆＃39;。

Answer 7

试试这个应该可以正常工作：）

<强>代码：

＆＃13;

div{
  height: 100px;
  margin-left: 300px;
  background-color: red;
}

＆＃13;

<div> Content </div>

＆＃13;

HTML和CSS：如何布局宽度为100％且左侧为300px的div标签

7 个答案: