Question

我试图让页面水平而不是垂直溢出，所以如果内容不适合页面窗口，我希望它只能通过overflow-x栏滚动，从而保持页面固定的高度。这个想法是让它“水平地”成长 - 所以在右边。这可以用CSS理想地完成吗？

任何帮助将不胜感激！：）

谢谢并保重，此致彼得。

Answer 1

这是解决方案:)。这不需要设置固定宽度，但您仍然需要控制内容的高度。在生产中，你很可能想要添加内部容器，并添加一些调整以使其在IE中工作。

<body>
    <div class="page-container">...</div>
    <div class="page-container">...</div>
    <div class="page-container">...</div>
</body>

html, body{
    height: 100%;
    padding: 0;
    margin: 0;
    white-space: nowrap;
    font-size: 0;
}
.page-container{
    display: inline-block;
    height: 100%;
    max-width: 700px;
    padding: 0 2em;
    font-size: 14px;
    white-space: normal;
    overflow: hidden;
    vertical-align:top;
}

Answer 2

您可以让它自动增长。您可以使用width: 6000px;代替设置的宽度width: max-content;，它会自动缩放以适合您的内容。

height:100%;
width: max-content;
overflow-y:hidden; #optional if you want to lock down height.

Answer 3

它不会自动水平增长，但如果您的内容需要，您可以轻松地将其设置为水平滚动。您需要设置固定宽度以适应内容。示例，已修复height:100%;，已修复width:6000px;和overflow-y:hidden; overflow-x:scroll;，但遗憾的是，这些浏览器与所有浏览器不完全兼容。

Answer 4

height:100%;
width:auto;
overflow:hidden

这应该可以解决问题。只需确保您的内容不会高于页面宽度，否则会被裁剪。您可以使用javascript修复此问题，在内容长度超过高度时创建新列。

好的，宽度：auto不适用于里面的浮动元素...如果使用javascript（jquery）也可以修复。演示：http://jsfiddle.net/Q3dC5/

如何让身体内容水平溢出？

4 个答案: