高度：自动不适用于位置：相对于引导程序 3

Question

I have relative parent and absolute child that The child is on top of the father but father cannot get height:auto or Height as much as its content.If I get height its ok but I want to use min-height or auto height for responsive site. What's the problem? Even I use clearfix but its not work and The lower elements(child on available element) are placed on these elements because the height does not work automatically.

 .text-section.first { position: relative; } .text-container { top: -100px; padding: 0 2%; position: absolute; width: 70%; background-color: #fff; margin: 0 15%; }

 <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="text-section first clearfix"> <div class="text-container"> <!--min-height nemigire--> <h1 class="heading">Welcome to Enfold Hotel – the most beautiful hotel in South America</h1> <div class="row"> <div class="text-wrapper col-md-6 col-sm-12"> <h3 class="heading">A 5-Star superior hotel</h3> <p class="silver-text">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p> <p class="silver-text">Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo. </p> <span class="glyphicon glyphicon-star golden"></span> <span class="glyphicon glyphicon-star golden"></span> <span class="glyphicon glyphicon-star golden"></span> <span class="glyphicon glyphicon-star golden"></span> <span class="glyphicon glyphicon-star golden"></span> </div> <div class="text-wrapper col-md-6 col-sm-12"> <h3 class="heading">Luxury at its best</h3> <p class="silver-text">Aenean massa. Cum sociis natoque penatibus et <span class="golden">magnis</span> dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p> <p class="silver-text"> Donec pede justo, fringilla vel, aliquet nec, <span class="golden">vulputate</span> eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p> </div> </div> </div> </div> <div class="available"></div>

Answer 1

I have relative parent and absolute child that The child is on top of the father but father cannot get height:auto or Height as much as its content.If I get height its ok but I want to use min-height or auto height for responsive site. What's the problem? Even I use clearfix but its not work and The lower elements(child on available element) are placed on these elements because the height does not work automatically.

 .text-section.first { position: relative; } .text-container { top: -100px; padding: 0 2%; position: absolute; width: 70%; background-color: #fff; margin: 0 15%; }

 <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="text-section first clearfix"> <div class="text-container"> <!--min-height nemigire--> <h1 class="heading">Welcome to Enfold Hotel – the most beautiful hotel in South America</h1> <div class="row"> <div class="text-wrapper col-md-6 col-sm-12"> <h3 class="heading">A 5-Star superior hotel</h3> <p class="silver-text">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p> <p class="silver-text">Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo. </p> <span class="glyphicon glyphicon-star golden"></span> <span class="glyphicon glyphicon-star golden"></span> <span class="glyphicon glyphicon-star golden"></span> <span class="glyphicon glyphicon-star golden"></span> <span class="glyphicon glyphicon-star golden"></span> </div> <div class="text-wrapper col-md-6 col-sm-12"> <h3 class="heading">Luxury at its best</h3> <p class="silver-text">Aenean massa. Cum sociis natoque penatibus et <span class="golden">magnis</span> dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p> <p class="silver-text"> Donec pede justo, fringilla vel, aliquet nec, <span class="golden">vulputate</span> eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p> </div> </div> </div> </div> <div class="available"></div>

Answer 2

I have relative parent and absolute child that The child is on top of the father but father cannot get height:auto or Height as much as its content.If I get height its ok but I want to use min-height or auto height for responsive site. What's the problem? Even I use clearfix but its not work and The lower elements(child on available element) are placed on these elements because the height does not work automatically.

 .text-section.first { position: relative; } .text-container { top: -100px; padding: 0 2%; position: absolute; width: 70%; background-color: #fff; margin: 0 15%; }

 <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="text-section first clearfix"> <div class="text-container"> <!--min-height nemigire--> <h1 class="heading">Welcome to Enfold Hotel – the most beautiful hotel in South America</h1> <div class="row"> <div class="text-wrapper col-md-6 col-sm-12"> <h3 class="heading">A 5-Star superior hotel</h3> <p class="silver-text">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p> <p class="silver-text">Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo. </p> <span class="glyphicon glyphicon-star golden"></span> <span class="glyphicon glyphicon-star golden"></span> <span class="glyphicon glyphicon-star golden"></span> <span class="glyphicon glyphicon-star golden"></span> <span class="glyphicon glyphicon-star golden"></span> </div> <div class="text-wrapper col-md-6 col-sm-12"> <h3 class="heading">Luxury at its best</h3> <p class="silver-text">Aenean massa. Cum sociis natoque penatibus et <span class="golden">magnis</span> dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p> <p class="silver-text"> Donec pede justo, fringilla vel, aliquet nec, <span class="golden">vulputate</span> eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p> </div> </div> </div> </div> <div class="available"></div>