需要帮助将 DIV 放入 DIV 以拉伸到 Firefox 中的内容宽度答案

【问题标题】：Need help getting DIV inside DIV to stretch to width of contents in Firefox需要帮助将 DIV 放入 DIV 以拉伸到 Firefox 中的内容宽度
【发布时间】：2013-11-19 14:08:29
【问题描述】：

我在这里使用的布局类似于 Dynamic Drive 中的布局： http://www.dynamicdrive.com/style/layouts/item/css-right-frame-layout/

主要内容区域（白色）的溢出设置为自动。我已经给这个主要内容区域内的 innerTube 一个边框。但是，如果此 innerTube 中的内容大于主内容区域的宽度，则会按预期出现水平滚动条，但在 Firefox 中，这些内容将“重叠”边框并离开屏幕（可以通过水平滚动检索） .换句话说，右边的边框保持在原地，内容刚好越过它的op，消失在右边的列后面。

在 IE 中，它的行为完全符合我的要求 - 内容将边框推离屏幕，只有在您滚动到那里时才可见。

我想最简单的方法就是在这里粘贴源代码。如果您将其复制到空白文件中，您会明白我的意思。我刚刚用了一个很长的词来复制如果有宽幅图像会发生什么。

提前感谢任何可以帮助我的人。

<!--Force IE6 into quirks mode with this comment tag-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
}

#framecontent{
position: absolute;
top: 0;
bottom: 0; 
right: 0;
width: 200px; /*Width of frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background: #cccccc;
color: white;
}

#maincontent{
position: fixed;
top: 0;
left: 0;
right: 200px; /*Set right value to WidthOfFrameDiv*/
bottom: 0;
overflow: auto; 
background: #fff;
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
.innertubeWithBorder {
margin: 15px;
border: solid 1px #666666;
}

* html body{ /*IE6 hack*/
padding: 0 200px 0 0; /*Set value to (0 WidthOfFrameDiv 0 0)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%; 
width: 100%; 
}

</style>

</head>

<body>

<div id="framecontent">
<div class="innertube">

<h1>CSS Right Frame Layout</h1>
<h3>Sample text here</h3>

</div>
</div>


<div id="maincontent">
<div class="innertubeWithBorder">

<h1>Dynamic Drive CSS Library</h1>
<p>AReallyLongWordWhichIsSimilarToHavingAnImageWithWidthGreaterThanTheWidthOfThisDivToShowOverFlowProblemWithBorderSoIfYouResizeThisWindowNarrowerYouWillSeeWhatIMeanWorksFineInIEButNotFirefox</p>
<p>So I want that border over there ------> to dissappear behind the right hand column like it does in IE, and be visible once you use the scrollbar below and scroll to the right</p>
<p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></p>

</div>
</div>


</body>
</html>

【问题讨论】：

这里的问题是您正在强制 IE 怪癖模式。它可以在 Chrome、Safari、Opera 以及所有非 IE 浏览器的 Firefox 中运行。摆脱怪癖模式，找到通用的东西。
谢谢克莱图斯。我对 Quirks Mode 知之甚少（主要是我在 quirksmode.org 上读到的）。无论如何，如果摆脱 quirks 模式意味着摆脱代码顶部的注释（即“强制 IE6 进入 quirks 模式”的注释），那么我尝试将其删除，但问题仍然发生在 Firefox 中。不过还是谢谢。

标签： html css

【解决方案1】：

您可以尝试两件事。

<wbr> - 这个标签不会在文本中打断，但它会告诉浏览器如果需要打断文本，应该在此处打断。您可以使用 Javascript 的 substr 函数 (http://www.quirksmode.org/js/strings.html#substr) 将文本分开，添加 <wbr> 标记，然后将文本重新组合在一起。
width: auto 此选项不太可取，因为它可能会破坏您的布局并使其看起来不那么完美。但是，如果在您的 div 上设置了此项，它将确保 div 始终足够大以包含其内部内容。

希望这会有所帮助！

【讨论】：

谢谢约翰。长文本实际上只是为了重新创建不换行的东西。这与我遇到的真正问题相同，即宽图像。所以想象一下，长长的文本是一个同样宽的图像，这就是我想要处理的。我只是使用文本让人们更容易粘贴到页面中并查看我在说什么。我想我可以在某个地方链接到一个宽图像....我也尝试过 width:auto 但不幸的是它没有用。

【解决方案2】：

想通了。将 innerTubeWithBorder 也设置为固定，并使用相同的 IE CSS hack 使其高度和宽度为 100%，然后将其溢出设置为自动。为了获得填充，我在 IE 的 mainContent 中使用了 padding:5px，并将顶部、底部、右侧和左侧设置为 5px 用于 FF。

感谢任何对此提出任何想法的人。

【讨论】：