个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
25
4
我有一个包含动态生成表格的页面。此表格的列数及其内容的宽度在页面生成时确定，但可以足够大以致于表格超过窗口的宽度。
发生这种情况时，body 元素的宽度不会扩展以包含其内容，而是会限制在窗口的宽度内。因此，所有其他后代元素(表格除外)的最大宽度也等于窗口的宽度:
__________________________ window bounds
| BODY ELEM |
| ______________________ |
| | HEADER ELEM | |
| |____________________| |
| |
| ______________________ |
| | DIV#main | |
| | __________________________________________________
| | | ELEMENT WHICH IS WIDER THAN WINDOW |
| | |________________________________________________|
| |____________________| |
| |
| ______________________ |
| | FOOTER ELEM | |
| |____________________| |
|________________________|
这意味着当水平滚动时，其他 block 级元素会提前停止(它们的背景颜色不会扩展，破坏页面的外观)。
Here is a jsFiddle showing the problem .请注意结果窗口中的黄色 block 如何向右扩展，但棕色、白色和蓝色 block 不会。
我正在寻找解决此问题的纯 CSS 方法。
我最接近的完全没有改变文档结构的是:
body {
min-width: -webkit-min-content;
min-width: -moz-min-content;
min-width: min-content;
}
但是，IE 根本不支持“min-content”。有没有人有跨浏览器的纯 CSS 解决方案来解决这个问题？
为了完整性(以防人们看不到 jsFiddle)，这里是一些显示问题的代码:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {margin:0;padding:0;}
body {
background-color: #888;
/* Adding the two lines below fixes the problem for webkit and moz. But IE does not support min-content.
min-width: -webkit-min-content;
min-width: -moz-min-content;
*/
}
header {
background-color: #321;
}
header nav {
padding: 10px;
color: #FFF;
}
footer {
padding: 10px;
color: #ccc;
background-color: #123;
}
#main {
padding: 16px;
background-color: #FFF;
}
#wideContent {
background: #FF0;
width: 4800px; /* In reality, this will vary at runtime, so I cannot set an explict width on the body */
}
table {
border-collapse: separate;
border-spacing: 0px;
border-color: #808080;
border-style: solid;
border-width: 1px;
border-bottom-width: 0;
background-color: #FFF;
}
td, th {
border-color: #808080;
border-style: none;
border-width: 0;
border-bottom-style: solid;
border-bottom-width: 1px;
padding: 5px 10px;
min-width: 100px;
}
</style>
</head>
<body>
<header>
<nav>Header</nav>
</header>
<div id="main">
<div id="wideContent">
<p>Content here will be a table with a very large number of columns.</p>
<p>The content and width of the table is not known beforehand, so cannot be preset anywhere in CSS.</p>
</div>
</div>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
最佳答案
我刚刚添加了以下 CSS。并且有效。
body {
float: left;
min-width: 100%;
}
关于html - 将正文元素宽度扩展到超出窗口宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22301513/
25
4
0
我在休息服务中有以下方法: @POST @Path("/create") @ResponseStatus(HttpStatus.CREATED) @Consumes(M
这个问题不太可能对 future 的访客有帮助；它只与一个小的地理区域、一个特定的时刻或一个非常狭窄的情况相关，通常不适用于互联网的全局受众。如需帮助使这个问题更广泛地适用，visit the hel
我有这样的弹出框: Speelland And here's some amazing content. It's very engaging. Right? Meer
我正在开发一个 firefox 插件，我正在收听这样的 http 响应: var observerService = Components.classes["@mozilla.org/observer
我正在使用 jqtouch 制作一个移动网站。我还在网站中实现了图库图像 slider ，但是当图库放在我需要的位置时(在 之间，图像不会显示。 修补了几个小时后，删除了 display: none
为了在 iPad 上的 Safari 上显示视差效果，我采用了以下 CSS 规则: body:after { content: ""; position: fixed; top
我想在通过 excel VBA 创建的电子邮件正文中插入一个链接。链接每天都在变化，所以我把它的值放在单元格 B4 中。但是，我找不到正确的方法来发送带有该链接的电子邮件。 这是我正在使用的代码: P
我正在尝试使用具有非常大主体的 Postman 执行 POST 请求。只有一个 JSON 字段非常大，我想知道是否可以从 Postman 的文件中加载该字段？ { "field1": {
这个问题是针对 SoapUI 5.2.1 社区版的: 我有一个包含变量的 JSON 主体的 POST 请求。 我总是能够通过单击“原始”选项卡以查看请求进行或将发送到服务器来验证这些参数是否采用正确的
我有这个按钮，单击该按钮会打开 Outlook，其中包含我提供的详细信息。我还有一个 TEXTAREA，其中包含某些文本。我正在寻找一种方法让此文本出现在我的 Outlook 正文中。这可以做到吗？请
我知道错误消息是不言自明的，我们无法多次读取消息正文。这里我使用AOP(面向方面编程)来进行审计日志。 [AuditServiceMethod(AttributePriority = 0)] [F
我在 grails 3.3.3 中编写自定义验证器(命令)时遇到了一些问题。具体来说，我正在尝试验证其正文由项目列表组成的 POST 请求。这就是我所拥有的... 命令: class VoteComm
这个问题在这里已经有了答案: json.Marshal(struct) returns "{}" (3 个回答) JSON and dealing with unexported fields (3
我想清理很多邮件的 HTML 正文，它们有点脏(取自 Gmail 发送的电子邮件):有很多嵌套 ，不需要的字体更改等我想清理它并只保留 , , , , , 仅此而已(可能还有 或一些 ，
我正在使用 Accordion 功能在我的模块中添加端口详细信息。我只想在水平方向上显示正文内容。请看下面的 fiddle 。 html, body { background-color:#e
我的 HTML 正文中有这个: loaded y&EACUTE;t. 使用 JavaScript 我有这个: $( document ).ready(function() { document.bod
我对图表有很大的疑问。我试图在谷歌图表中显示一些 json 值，但我总是会出错。从 JSON 正文中，我只需要图表上个月的“全部购买”和“日期”。我见过的所有例子，他们已经有了一个静态的自定义 Jso
我的应用程序的功能之一涉及用户填写三个单独的文本字段(预订名称、客人和日期)，然后使用文本编辑器通过短信发送这些字段中的文本。我无法将这些 View 中的文本放入正文中。这是我的代码: - (IBAc
我正在开发一个 HTA，它应该对 onunload 事件进行一些最终修改。该事件似乎没有被触发。 该事件是否仍受支持？是否有 IE 事件可以知道页面何时关闭？ 我检查了一下(JavaScript bo
我正在尝试将以下图像添加为网站内容的背景: http://webbos.co/vibration/wp-content/themes/vibration-child-theme/images/back
我是一名优秀的程序员,十分优秀！