HTML / CSS“宽度：100％”未填满整个空间

Question

我正在尝试将导航栏宽度设置为100％，因此请在屏幕上拉伸。 我正在这样做，但是不起作用：

 @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300"); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Open Sans'; background-color: #F5F5F5; } div#header { width: 100%; height: 220px; background-color: lightgray; margin: 0 auto; margin-top: 0; } /* #222222 - top nav #F5F5F5 - sidebar background color #FFF - sidebar link hover background color #63B7E8 - sidebar nav link hover text color #D8D8D8 - sidebar nav text color */ /* Navigation */ /* Nav Title */ .nav { background-color: dimgray; width: 100%; height: 35px; }

 <html> <head> <title>Dashboard</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="header"> </div> <div class="container"> <!-- Navigation --> <div class="nav"> <div class="nav-items"> </div> </div> </div> </body> </html>

这是它正在做的事情： https ://gyazo.com/a8cbf7530ccfa46f01a603e1c7dcb465知道这只是部分伸展了吗？

Answer 1

container类在bootstrap.css受限制：

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

所有子元素将此width称为100% 。

未来技巧：熟悉浏览器的DOM检查工具：

Answer 2

正如Marvin所说，由于<div class="container">存在，所以宽度受到限制。

因此，您可以选择更改标记，如下所示：

<div id="header">
</div>

    <!-- Navigation -->
    <div class="nav">
        <div class="nav-items">

        </div>
    </div>

要具有width: 100% <div class="nav-items"> width: 100% 。

但

但是，如果您追求的是类似的背景，其中导航背景被全宽扩展，但菜单项仍包裹在container ，则可以这样进行：

 #header{ height: 40px; } .nav-bg{ background-color: #7878EF; } .container{ width: 80%; margin: 0 auto; } .nav{ height: 20px; padding: 10px 0; } .nav .nav-items{ float: left; margin-right: 20px; color: white; }

 <div id="header"></div> <div class="nav-bg"> <div class="container"> <div class="nav"> <div class="nav-items">Nav Item</div> <div class="nav-items">Nav Item</div> <div class="nav-items">Nav Item</div> </div> </div> </div> <div class="container"> This is body content. This is body content. This is body content. This is body content. This is body content. This is body content. This is body content. This is body content. </div>

HTML / CSS“宽度：100％”未填满整个空间

问题描述

2 个解决方案

解决方案1
3 2016-02-04 23:21:30

解决方案2
0 2016-02-05 00:17:02

但

HTML / CSS“宽度：100％”未填满整个空间

问题描述

2 个解决方案

解决方案1 3 2016-02-04 23:21:30

解决方案2 0 2016-02-05 00:17:02

但

解决方案1
3 2016-02-04 23:21:30

解决方案2
0 2016-02-05 00:17:02