gpt4 book ai didi

css - 当内部的 div 向右溢出时,如何让 body 继续看起来一样?

转载 作者:行者123 更新时间:2023-11-28 08:56:42 24 4
gpt4 key购买 nike

html {
background-color: #e2e2e2;
margin: 0;
padding: 0;
white-space:nowrap;

}

body {
background-color: #fff;
border-top: solid 10px #000;
color: #333;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
}

#body {
min-width:1015px;
background-color: #efeeef;
padding-bottom: 35px;
position: relative;
display: inline-block;
vertical-align: top;
}

我的页面上有 CSS。 #body 用于使用 ajax 由部分 View 填充的 div。

问题是,当#body 中的内容向右溢出时,body 并没有封装#body 中的内容,它在加载时保持窗口大小。因此,当水平滚动时,滚动时变得可见的区域中的 body 部分的背景看起来不同。

当#body 向右流动时,我怎样才能使 body 继续看起来一样?

http://jsfiddle.net/q2j4wcmo/

更新:

Hashem Qolami 确实解决了我的部分问题,当放大#body 中的内容时,body 仍然封装了#body 并且它看起来像它应该的那样。但是在我的解决方案中,当加载页面时,#body 中的内容溢出 body 没有封装#body 中的内容。

知道在 jsfiddler 中运行时它明显按预期工作会有什么不同吗?

更新 2:新例子

http://jsfiddle.net/q2j4wcmo/10/

最佳答案

一个选项是更改 <body> 的显示类型至 inline-block让它的内容水平增长。

您也可以使用 min-width: 100%;确保 <body>总是填满整个页面,即使它的内容不是那么宽:

EXAMPLE HERE

html {
white-space:nowrap;
width: 100%;
}

body {
display: inline-block;
min-width: 100%;
}

注意:由于百分比值为 min-width指的是包含 block 的宽度,您必须指定显式宽度 <html>元素也是如此(就像我一样)。

关于css - 当内部的 div 向右溢出时,如何让 body 继续看起来一样?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25400620/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com