为什么？

Question

上下文

通常，当我希望div填满水平空格时，我会使用width:100%

但是，在我的某个页面上，width:100%标记会水平扩展页面，从而在右侧显示一列空白区域，并在x轴上显示滚动条。

我怀疑这是因为某些子div中的padding。

无论如何，当我从div风格中删除width:100%时，问题似乎得到解决。所以我最终得到了这个：

<div style="background:rgba(0,0,0,0.8);padding:8px;"><h1>smelle ;)</h1><?php include("navbar.php"); ?></div>

页面恢复正常，div继续填满页面的整个水平长度，并且右边没有更多的间隙。

我的问题是......

在我目前的代码中，没有任何内容可以定义div的宽度，但它会继续填充水平长度。

它工作正常，我已经尝试过几种浏览器。我只是担心将来会出现问题，或者使用较旧的浏览器。

任何人都可以告诉我这是好还是我应该对此做些什么？

Answer 1

不添加宽度是正确的。

为什么？

如果“100％”是您想要的，则根本不需要修改宽度，因为这是所谓的块级元素的标准行为（具有{{1的元素）无论是默认还是CSS中的每个手动分配：它们都可以获得尽可能多的水平空间。

滚动条的行为来自外部 div上的display: block;。标准框模型将宽度定义为元素的内部宽度，您必须在其上添加左右填充和边框以找出实际< / em>元素的宽度。

如果您希望将来避免此问题，可以申请

padding: 8px

位于第一个加载的CSS样式表的顶部。这使得填充类型成为“内部填充”。与边界相同。边框和填充不再添加到元素的尺寸，而是发生在内部。这是旧Internet Explorer一直使用的盒子模型。 html { box-sizing: border-box; } *, *:after, *:before { box-sizing: inherit; }属性允许您在现代浏览器中使用它。 box-sizing是前所谓的W3C盒子模型（除非你指定别的东西，否则默认在所有浏览器中），现在使用的旧IE被称为content-box。此图像显示它（使用图片的文章已过时，我不想链接到它）：

在这里找一个简短的视频来解释盒子模型（如果你想做网页设计，这绝对是至关重要的）：

https://helpx.adobe.com/dreamweaver/how-to/understanding-the-box-model.html

Answer 2

没关系。 width中div的默认值为auto。

它的作用与width: 100%几乎相同，因为它会使div占据父级的整个宽度。不同之处在于它将在宽度中包含边框和填充，因此如果您有宽度，则外部宽度不会比父级宽。

Answer 3

外部div有一个padding:8px;。所以当给出width:100%;时，左右会有8px的额外值，这会导致滚动。

您可以通过指定box-sizing: border-box;

将填充也包括在宽度中

如你所提到的为子div填充不是问题。此外，如果子div的总宽度大于窗口大小，它也可能导致滚动。

当避开宽度时，div将始终填充整个宽度，除非您指定float或position属性

Answer 4

我认为原因是如果声明div没有宽度它的行为就像它有宽度：auto; 意味着它将取决于它的内容，这就是为什么它会水平扩展，因为你没有特定的宽度;

如下面的示例;

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="lolkittens" />

    <title>Untitled 5</title>
</head>

<body>
<div class="container">          
the quick brown fox jumps over the lazy dog near the river bankthe quick brown fox jumps over the lazy dog near the river bankthe quick brown fox jumps over the lazy dog near the river bankthe quick brown fox jumps over the lazy dog near the river bankthe quick brown fox jumps over the lazy dog near the river bankthe quick brown fox jumps over the lazy dog near the river bank                
</div>  
<body>
</html>

希望这可以帮助您理解

当你没有定义div宽度时通常会发生什么？

4 个答案:

为什么？