Question

我正在尝试解决这个问题。它设置为100％宽度但它不占用整个页面。我该怎么做才能解决这个问题？

相关代码（我正在搞乱的一些事情仍在代码中）：

<body>
<form id="form1" runat="server">
    <nav class="navbar navbar-default" style="position: page; top: 0; left: 0; margin: 0; padding: 0; width: 100%;">
        <div id="header" style="height: 50px; width: 100%; position:relative; background-color: #2A333E;">
            <div style="height: 50px;">
                <img alt="logo" src="http://i.imgur.com/hRaRJhq.png" style="width: 157px; height: 52px;" />
            </div>
        </div>
    </nav>
</form>
</body>

CSS：

html, body {
margin:0px;
padding:0px;
width: 100%;
}

Answer 1

问题是，100％是在视口上计算的，而不是在页面内容上计算的，如果您不需要水平滚动导航栏，您可以将导航栏的位置设置为固定，并将一些顶部填充添加到正文以覆盖以上内容。

但是，如果您希望使用内容滚动导航栏，则必须将其放在此表所在的同一容器中。

Answer 2

您的徽标是透明的，最小宽度。因此，当页面变得太窄时，徽标的背景颜色会覆盖标题背景颜色。

将背景颜色添加到图片代码中。

<img alt="logo" src="http://i.imgur.com/hRaRJhq.png" style="width: 157px; height: 52px; background-color: #2A333E" />

使Div填充内容的宽度而不仅仅是屏幕

2 个答案: