html - CSS水平扩展带

Closed. This question needs details or clarity。它当前不接受答案。












                            想改善这个问题吗？添加详细信息并通过editing this post阐明问题。

                        4年前关闭。



从周日开始，我已经尝试了这7种方法，但我一直很努力。

在互联网论坛/博客中，色带或您所拥有的扩展到可见页面范围的东西似乎是非常普遍的要求，但是对于两种主要情况，我都遇到同样令人沮丧的问题，这使得任何一种解决方案都难以为继。令我沮丧的是，我转过身来。

的HTML

<body>

<div class="container"></div>

<div class="content-container">

    <div class="content">

        Hello, I need some text that extends for a bit, so I'll just write this in the div and all will be good.

    </div>

</div>

<div class="container"></div>

场景1
您将容器div的宽度设置为：100％，然后将子div的宽度和边距设置为固定：0自动；这样始终可以有效地将div扩展到visibel屏幕的末端。

html, body {
width: 100%;
}

.container {
height: 20px;
background-color: #377ab7;
margin: 0 auto;
}

.content-container {
height: 100px;
margin: 0 auto;
}

.content {
width: 300px;
}

方案1问题
调整屏幕大小以使子div的固定宽度对于窗口而言太大时，会出现滚动条。这是绝对好的要求，但是当您使用滚动条时，扩展的色带仅扩展到可见窗口的100％。

小提琴1（您需要调整浏览器窗口的大小，以保留固定宽度的内容div的大小，然后使用滚动条，您会看到蓝色带没有延伸到窗口大小的100％以上。）
https://jsfiddle.net/b1dht69u/2/

方案2
您将overflow-x：设置为隐藏在主体上，然后运行很高的负边距，并带有相应的正填充。

body {
overflow-x: hidden;
}

.container {
height: 20px;
background-color: #377ab7;
margin: 0 -9999px;
padding: 0 9999px;
}

.content-container {
height: 100px;
margin: 0 -9999px;
padding: 0 9999px;
}

.content {
width: 300px;
}

除非您再次尝试调整屏幕大小，否则这绝对很棒。

方案2问题
当您调整大小超过子div固定宽度的大小时，不会出现滚动条。

小提琴2
https://jsfiddle.net/mnodvLvg/1/

我正在寻找的是两全其美。我希望有一个始终延伸到可见页面两端的颜色条，但是当浏览器的大小调整为超过内部divs固定宽度时，会出现滚动条。

最佳答案

这是一个奇怪的问题，而且因为我主要使用响应式布局，所以我从未想过。

但是，Nicholas Cerminara的there is a nice article关于处理固定宽度的布局问题。

这样做的关键是在CSS的min-width和/或body{}上设置html{}。

有趣的是，Stack Overflow使用此技术来防止在调整窗口大小时其顶部导航栏损坏。只需在此网站上打开Web浏览器DOM资源管理器并禁用以下样式规则：
body{min-width:1030px;}和html{min-width:1000px;}
您将看到顶部导航栏破坏了其布局，并遇到了相同的问题。

关于html - CSS水平扩展带，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31542576/