gpt4 book ai didi

html - CSS 宽度 100% 仅限于浏览器窗口(它不会扩展到右侧滚动区域)

转载 作者:搜寻专家 更新时间:2023-10-31 08:25:48 24 4
gpt4 key购买 nike

本网站是全宽的,可适应浏览器窗口的大小。但是,一旦浏览器窗口小于显示的内容,一旦向右滚动,标题就会被截断。

100% 的默认宽度似乎只适用于浏览器窗口的宽度,而不是页面的宽度!这似乎也适用于垂直轴。


例子

#title
{
height: 50px;
color: white;
background-color: #404040;
}
#content
{
width: 800px;
background-color: #f0f0f0;
}
<div id="title">
TITLE
</div>
<div id="content">
CONTENT
</div>


实际结果

页面向左滚动时的样子

1

2

(为了简单和隐私,与问题无关的内容被删除。)

最佳答案

在摆弄了很多定位之后,我终于想出了一些办法。

body
{
position: absolute;
min-width: 100%;
min-height: 100%;
}

#menu-background
{
z-index: -1;
position: absolute;
width: 250px;
height: 100%;
background-color: #404040;
}

和菜单背景 HTML

<div id="menu-background"></div>

<body>需要绝对定位,否则content div的表格会溢出content div。此外,它需要一个 min-width 100% 以涵盖两种情况:窗口较小或较大。

菜单的工作方式相同,只是它是一个 <div>。跨越整个页面。


此解决方案非常适合 X 和 Y(菜单和标题)拉伸(stretch)和背景颜色。

关于html - CSS 宽度 100% 仅限于浏览器窗口(它不会扩展到右侧滚动区域),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36001590/

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