Question

这个问题来自早期的一个问题，我正在使 DIV元素自动扩展，并且已通过“overflow：all;”更正了。

因此，除此之外，这个新问题几乎完全相反，我想，这次DIVS扩展到页面底部之外，以便div的一部分不再可见。从玩代码开始，这似乎只有在我相对定位DIVS时才会发生。

请参阅JSFiddle以获得一个明确的例子。我一直试图解决这个问题几个小时！谢谢。

HTML：

<body>
<div id="container">
    <div id="block1">
        <div id="one">one</div>
    </div>
    <div id="block2">
        <div id="two">two</div>
        <div id="three">three</div>
        <div id="four">four
            <br />four
            <br />four
            <br />four
            <br />four
            <br />four
            <br />four
            <br />four
            <br />four
            <br />four
            <br />four
            <br />four
            <br />four
            <br />four
            <br />four
            <br />four
            <br />four
            <br />four
            <br />four
            <br />four
            <br />four
            <br />four
            <br />four
            <br />four
            <br />four
            <br />four
            <br />four
            <br />
        </div>
    </div>
</div>
</body>

CSS：

#container {
width: 1050px;
margin: auto;
padding: 5px;
background-color: #ededf0;
background: url("http://wguayan.comuv.com/brushed_metal_clear_apple.jpg") repeat;
}
#one, #two, #three, #four {
border-width: 1px;
border-color: black;
border-style: solid;
background-color: white;
border-radius:6px;
-moz-border-radius:6px;
/* Firefox 3.6 and earlier */
}
#one {
float: right;
width: 100px;
position: relative;
top: 0px;
left: 0px;
padding: 10px;
box-shadow: 9px 9px 12px #888888;
}
#two {
float: left;
width: 100px;
position: relative;
top: 0px;
left: 0px;
padding: 5px;
text-align: center;
box-shadow: 9px 9px 12px #888888;
}
#three {
float: right;
width: 100px;
position: relative;
top: 150px;
right: 30px;
padding: 10px;
box-shadow: 9px 9px 12px #888888;
}
#four {
float: right;
width: 100px;
position: relative;
top: 300px;
right: 40px;
padding: 10px;
box-shadow: 9px 9px 12px #888888;
}
#block1 {
width: 100%;
overflow: hidden;
border-width: 1px;
border-color: black;
border-style: solid;
}
#block2 {
width: 100%;
overflow: hidden;
border-width: 1px;
border-color: black;
border-style: solid;
}

Answer 1

你的CSS中有很多不好的做法，而不是试图提供一个固定的jsfiddle，也许有点学习CSS布局可能会有所帮助。

请花一些时间来审核http://learnlayout.com/

Answer 2

首先，我讨厌你努力让它们在太空中浮出水面。它对文档流程起了很大的破坏作用。

http://jsfiddle.net/H6du7/10/

#block2 {
  width: 100%;
  overflow: hidden;
  border-width: 1px;
  border-color: black;
  border-style: solid;
}

您的问题是“隐藏”方面。如果你让它滚动，或定义高度使它适合你，它会让你的生活更轻松。

Answer 3

#four定义的位置和大小会导致它大于其父级。在

overflow:hidden

＃block2上的css导致#four的溢出被隐藏。

这是一种可能的解决方案。 http://jsfiddle.net/H6du7/9/

DIV元素扩展到浏览器的可见部分之外

3 个答案: