Question

我有一个带有position:absolute的父div和一个带内容的子div。然而，当我在子div中添加太多文本时，它会在父div中溢出。父级的容器div具有position:relative。

如果有人可以帮我解决这个问题，我会很感激。

我不想要的是overflow:scroll。我希望容器能够与孩子一起成长。

    #main{
    	float:left;
    	width:100%;
    	padding:75px 0 55px 0;
        background-color:#999;
        position: relative;
    }
    
    .contentpage img{
    	display:block;
    	margin-bottom:40px;
    }
    
    #leftsection{
    	width:50%;
    	float:left;
    }
    
    #leftcontent{
    	width:480px;
    	float:right;
    }
    
    #leftcontent img{
    	background:red;
        height:453px;
        width:453px;
    }
    
    #rightsection{
    	width: -moz-calc(50% - 150px);
        width: -webkit-calc(50% - 150px);
        width: calc(50% - 150px);
    	margin:-75px 0 0 150px;
    	padding-bottom:20px;
    	height:100%;
    	float:left;
    	background-color:#f3f5f7;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
    }
    
    #rightsection > #rightcontent{
    	padding:85px 0 20px 35px;
    	max-width:330px;
    }
    
    #rightcontent{
    	width:auto;
    	float:left;
    }

    <div id="main" class="contentpage">
        <div id="leftsection">
            <div id="leftcontent">
                <div id="breadcrumbs">Bread / crumbs</div>
    			<img src="images/afbeelding1.png"/>
    			<img src="images/afbeelding2.png"/>
    		</div>
    	</div>
        <div id="rightsection">
    		<div id="rightcontent">
    			<h1>Title</h1>
    			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet.</p>
    					
    			<h2>Things:</h2>
    			<ul>
    			    <li>Lorem ipsum dolor sit amet.</li>
    				<li>Lorem ipsum dolor sit amet.</li>
    				<li>Lorem ipsum dolor sit amet.</li>
    				<li>Lorem ipsum dolor sit amet.</li>
    				<li>Lorem ipsum dolor sit amet.</li>
    			</ul>
    		</div>
    	</div>
    </div>

Answer 1

问题在于height:100%; div中的位置：绝对;。它意味着100％的显示高度。如果您删除position:absolute; http://jsfiddle.net/hs4o003o/6/

会更好

Answer 2

删除height:100% div上的#rightsection。

#rightsection{
    width: -moz-calc(50% - 150px);
    width: -webkit-calc(50% - 150px);
    width: calc(50% - 150px);
    margin:-75px 0 0 150px;
    padding-bottom:20px;
    /*height:100%;*/
    float:left;
    background-color:#f3f5f7;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
}

Answer 3

您需要将属性绝对交换为相对属性。使子元素相对，父元素绝对。然后它会随着孩子一起成长。

DEMO

 #main{
    float:left;
    width:100%;
    padding:75px 0 55px 0;
    background-color:#999;
    position: relative;
}

#rightsection{
    width: -moz-calc(50% - 150px);
    width: -webkit-calc(50% - 150px);
    width: calc(50% - 150px);
    margin:-75px 0 0 150px;
    padding-bottom:20px;
    height:100%;
    float:left;
    background-color:#f3f5f7;
    position: relative;

}

这个孩子的另一个DEMO2也是亲戚。

最后，我认为这可能是您正在寻找的解决方案。我想如果你使用相同的div id #main elsewher它可能会给你带来麻烦，但这里是DEMO3

Answer 4

您没有说明如何处理溢出问题，因此我更新了您的小提琴以使用scroll：http://jsfiddle.net/hs4o003o/1/

另外，既然你说“文字”，我不得不假设你在谈论#rightcontent，对吗？

我只是向#rightsection > #rightcontent添加了两行CSS：

overflow-y: scroll;
max-height: 100%;

第一个应该说明一切，第二个必须告诉浏览器overflow-y属性上的哪个点应该生效。

绝对内容超出了相对父级

4 个答案: