Question

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

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

在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>

Answer 1

你可以尝试两件事。

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

希望这有帮助！

Answer 2

想出来。设置innerTubeWithBorder也是固定的，并使用相同的IE CSS hack使其100％高度＆amp;宽度，然后将IT'溢出设置为自动。为了获得填充，我使用了填充：在mainContent中使用5px进行IE，并设置top，bottom，right和amp;留下5px的FF。

感谢任何想到它的人。

需要帮助在DIV中获取DIV以扩展到Firefox中的内容宽度

2 个答案: