Question

我已经从周日尝试了这七种方式，而且我一直在做空。

在互联网论坛/博客中，颜色带或者你有哪些扩展到可见页面的界限似乎是一个非常常见的请求，但是对于两个主要场景中的每一个我都遇到同样令人沮丧的渲染问题要么解决方案站不住脚。我沮丧地转过身来。

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 您设置宽度为100％的容器div，然后设置固定宽度和边距的子div：0 auto;这有效地将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/

我正在寻找的是两个世界中最好的。我希望有一个颜色条始终延伸到可见页面的末尾，但当浏览器调整大小超过内部div固定宽度时，会出现一个滚动条。

Answer 1

这是一个奇怪的问题，而且我从未考虑过这个问题，因为我主要处理响应式布局。

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

关键是在CSS中min-width和/或body{}上设置html{}。

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

Answer 2

这个场景2与9999px的东西实际上非常脏，忘了它。

如果你检查div，你会发现问题不是来自div.container本身，而是来自身体。

我会用以下方法解决这个问题：

html, body {
  position: absolute;
  min-width: 100%;
  width: auto;
}

提醒一下，不要忘记ID必须是唯一的。在这种情况下更好地使用类。

另一个想法可能是忘记那些.container DIV并实际为.content-container创建边框，但我不知道你究竟想做什么。

#content-container {
  height: 100px;
  margin: 0 auto;
  border-top: 20px solid #377ab7;
  border-bottom: 20px solid #377ab7; 
}

祝你好运！

Answer 3

如果内容div的宽度固定，您也可以在min-width标记上设置相同或更大值的body。这样可以保证它不会小于您的内容。

html, body {
  width: 100%;
  min-width: 300px;
  margin: 0;
}

CSS水平扩展波段

3 个答案: