个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
26
4
抱歉，这个问题一定很愚蠢。
我有一个 div #header 和一个 div #content。 #content 的内容可能很宽，甚至比视口(viewport)还宽。在这种情况下，会出现一个水平滚动条，这很好。
但是，对于水平滚动条，我希望#header 占据 100% 的宽度，而不是视口(viewport)的宽度，而是文档的宽度；这样当用户滚动时它就不会被打断。
代码如下:
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>test</title>
</head>
<body>
<div id="header" style="background:red;">this should take the entire width, even when
scrolling to the right</div>
<div id="content" style="min-width:1000px; min-height:1000px; border:1px solid green;">this causes a horizontal
scrollbar on narrow displays</div>
</body></html>
这是一个例子:http://a3nm.net/share/test_157235.html
我希望红色的#header div 与下面的#contents 一样宽。对于示例，我模拟了 #content 的宽度为最小宽度，但总的来说，我想要一种无论#contents 恰好具有什么宽度都有效的方法。
请注意，如果#content 足够高以导致垂直 滚动，我希望在用户向下滚动时标题随内容顶部一起滚动。
我确信这可以用 Javascript 完成，但我会寻找纯 CSS 解决方案。
谢谢!
最佳答案
好的，我找到了一个方法。首先，将 html 和 body 设置为 margin 和 padding 为 0，因为 CSS 重置会:
html, body
{
padding: 0;
margin: 0;
}
接下来，将#header 和#content 包含在具有以下样式的div #wrapper 中:
#wrapper
{
position:absolute;
min-width: 100%;
}
这使得 wrapper 占据至少 100% 的视口(viewport)宽度(由于 CSS 重置导致没有水平滚动条)，并且它是绝对的使得它以某种方式占据 100% 的文档宽度以防需要水平滚动条因为#content。
完整的解决方案:
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>test</title>
<style type="text/css">
html,body {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div style="position:absolute; min-width: 100%;">
<div id="header" style="background:red;">this should take the entire width, even when
scrolling to the right</div>
<div id="content" style="min-width:1000px; min-height:1000px; border:1px solid green;">this causes a horizontal
scrollbar on narrow displays</div>
</div>
</body></html>
关于html - 在水平滚动下让 div 占文档宽度的 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32234866/
26
4
0
我的 DateTime 对象使用 DateTime.Now 分配了本地时间。我想知道一旦夏令时开始/结束，这个对象是否会给出正确的当前本地时间。或者我需要解决方法吗？ 最佳答案 是的，DateTime
假设我需要“特定类别中可用的项目数量”与“所有项目的数量”的比率。请考虑这样的 MySQL 表: /* mysql> select * from Item; +----+------------+--
我有这张 table http://codepen.io/MetCastle/pen/lxceL我想使用 jQuery 根据 input type="number" 隐藏/显示列。表示整个列: Pro
想要制作一个看起来像这样的网格，其中 div/section 以百分比表示。 margin 在任何地方都是一样的。 http://www.ladda-upp.se/bilder/giefekcmgwm
这将返回 1(又名 TRUE) SELECT DATE_SUB(NOW(), INTERVAL 24*100 HOUR) = DATE_SUB(NOW(), INTERVAL 100 DAY); 10
我一直在尝试在 UIScrollView 中获取 UIView 的转换后的 CGRect。如果我不放大它就可以正常工作，但是一旦我放大，新的 CGRect 就会发生变化。这是让我接近的代码: CGFl
对于家庭作业，我需要在不使用内置模 (%) 运算符的情况下返回 num1 除以 num2 后的余数。我能够通过以下代码让大多数测试通过，但我仍然坚持如何解释给定数字的 -/+ 符号。我需要保留 num
我用 Javascript 创建了一个倒数计时器；它是成功的，期望未完成。事实上，从数学上讲，它是正确的，但是谷歌浏览器的浏览器设置“暂停”(因为没有更好的术语)SetInterval/Timeout
我有两个 的，每个都设置为其容器宽度的 45%。有没有办法使 居中？使得它们在容器的左右两侧有相同的空间，并且它们之间也有空间。 一开始我只是做了每个 50% 并且有 padding: 0px 2
我是一名优秀的程序员,十分优秀！