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

【问题标题】：Make a Div fill the width of content not just the screen使 Div 填充内容的宽度而不仅仅是屏幕
【发布时间】：2017-04-02 12:02:30
【问题描述】：

我正在尝试修复这个 div。它设置为 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%;
}

【问题讨论】：

style="position: page;-snip-" ?
我得到 100% 与你的 sn-p。
您发布的代码可以正常工作jsfiddle.net/9tpn2L5g
@PascalClaes 那么这可能是什么干扰？因为它只填充我的屏幕视图，而不是页面的实际内容。

标签： c# html css asp.net visual-studio

【解决方案1】：

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

为您的图像标签添加背景颜色。

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

【讨论】：

【解决方案2】：

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

但是，如果您希望导航栏随内容一起滚动，则必须将其放置在该表格所在的同一容器中。

【讨论】：