发表新帖
发表新帖

How to force child div to be 100% of parent div's height without specifying parent's height?

前端 未结
关注
26 1650
刺人心
刺人心 2020-11-22 06:52

I have a site with the following structure:





  

  <         


        

                      

              相关标签:
26条回答
  • 野的像风
    2020-11-22 07:34

    As shown earlier, flexbox is the easiest. eg. 

    #main{ display: flex; align-items:center;}

    this will align all child elements to the center within the parent element.

    0 讨论(0)
  • [愿得一人]
    2020-11-22 07:35 
    #main {
   display: table;
} 
#navigation, #content {
   display: table-cell;
}

    Look at this example.

    0 讨论(0)
  • 轮回少年
    2020-11-22 07:35

    I had the same issue, it worked based on Hakam Fostok's answer, I've created a small example, in some cases it might work without having to add display: flex; and flex-direction: column; on the parent container 

    .row {
    margin-top: 20px;
}

.col {
    box-sizing: border-box;
    border: solid 1px #6c757d;
    padding: 10px;
}

.card {
    background-color: #a0a0a0;
    height: 100%;
}

    JSFiddle

    0 讨论(0)
  • 日久生厌
    2020-11-22 07:37

    I know it's been a looong time since the question was made, but I found an easy solution and thought someone could use it (sorry about the poor english). Here it goes:

    CSS

    .main, .sidebar {
    float: none;
    padding: 20px;
    vertical-align: top;
}
.container {
    display: table;
}
.main {
    width: 400px;
    background-color: LightSlateGrey;
    display: table-cell;
}
.sidebar {
    width: 200px;
    display: table-cell;
    background-color: Tomato;
}

    HTML

    <div class="container clearfix">
    <div class="sidebar">
        simple text here
    </div>
    <div class="main">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.
    </div>
</div>

    Simple example. Note that you can turn into responsiveness.

    0 讨论(0)
  • 孤城傲影
    2020-11-22 07:37

    You use CSS Flexbox

    .flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}
    <!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

<p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>

<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>

</body>
</html>

    0 讨论(0)
  • 挽巷
    2020-11-22 07:38

    My solution:

    $(window).resize(function() {
   $('#div_to_occupy_the_rest').height(
        $(window).height() - $('#div_to_occupy_the_rest').offset().top
    );
});
    0 讨论(0)
 看不清?
提交回复
热议问题