Html 100%宽度比引导柱大_Html

Html 100%宽度比引导柱大

html

Html 100%宽度比引导柱大,html,Html,我想要一个带有中间引导列宽度的固定导航栏，但是当我将宽度设置为100%时，它会比这个列大。列的大小可能不同，因为它们是响应的，导航栏的大小必须跟随列的大小这是导航栏的图片 CSS body { margin:0; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; position: fixed; top: 0; width: 100% } li {

我想要一个带有中间引导列宽度的固定导航栏，但是当我将宽度设置为100%时，它会比这个列大。列的大小可能不同，因为它们是响应的，导航栏的大小必须跟随列的大小

这是导航栏的图片

CSS

body {
margin:0;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active) {
background-color: #111;
}

.active {
background-color: #4CAF50;
}

HTML正文

<!--bootstrap-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-1 col-md-3"> </div>
<div class="col-sm-10 col-md-6" id="middlebackground" >


<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div style="padding:20px;margin-top:30px;background-     color:#1abc9c;height:1500px;">
<h1>Fixed Top Navigation Bar</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>

<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>

<!--bootstrap-->
</div>
<div class="col-sm-1 col-md-3"> </div>
</div>
</div>








固定顶部导航栏
滚动此页面以查看效果
滚动时，导航栏将停留在页面顶部
一些文字一些文字一些文字一些文字
一些文字一些文字一些文字一些文字
一些文字一些文字一些文字一些文字
一些文字一些文字一些文字一些文字
一些文字一些文字一些文字一些文字
一些文字一些文字一些文字一些文字
一些文字一些文字一些文字一些文字
一些文字一些文字一些文字一些文字
一些文字一些文字一些文字一些文字
一些文字一些文字一些文字一些文字
一些文字一些文字一些文字一些文字
一些文字一些文字一些文字一些文字

固定元素相对于视口，而不是父对象，因此100%的宽度是视口的100%。要解决此问题，请更改为“绝对”，并将父项设置为“相对”：

#middlebackground { position: relative; }
#middlebackground ul { position: absolute; }

固定元素相对于视口，而不是父视口，因此100%的宽度是视口的100%。要解决此问题，请更改为“绝对”，并将父项设置为“相对”：

#middlebackground { position: relative; }
#middlebackground ul { position: absolute; }

谢谢你的快速回复！它确实使条形图大小合适，但现在当我向下滚动时，条形图不会停留在屏幕顶部……是的，绝对位置是相对于父对象而不是视口的，这是因为固定元素不会滚动，并且在视口中是固定的。为了达到您需要的效果，可能需要进行计算。如果您知道视口大小，假设您的位置仍然固定，并且您的

ul{width:80vw；}

ul{width:80vw；}