Task:

  • Horizontal behavior : as in the picture below; the left column occupies a fixed width, the other two divide by 50% the remaining width, but have a min-width .
  • Vertical behavior : the columns have the same height reaching the footer, and the footer itself is located at the bottom of the screen when the window height is greater than the height of the content, or comes immediately after the content when it is smaller (this problem was solved in this question).

enter image description here

To ensure the desired horizontal behavior, display:table; properties are best suited display:table; , display:table:cell; It is easy to make the desired horizontal behavior with these tools.

But what about the vertical? By its nature, the table should have a height equal to the sum of the row heights, and if we interfere with the table height management, a stretch of rows will occur, which was not required (I showed in the picture that the content is in the upper part of the cells).

The result is a conflict between the requirements for horizontal and vertical behavior. Are there any tools that allow for both behaviors?

PS I want wrap-content and match-parent from an XML layout for android ...

    2 answers 2

    If I got it right, here is the solution. The footer is pressed to the bottom, the columns of the same height, one of them is fixed in width, the rest divide the remaining space equally.

     * { box-sizing: border-box; } .container { display: flex; flex-direction: column; min-height: 100vh; background-color: black; } .container__columns { flex-grow: 1; display: flex; background: #5d8cf7; } .column1 { width: 50px; padding: 20px; } .column2 { flex-grow: 1; background: #f75d5d; padding: 20px; } .column3 { flex-grow: 1; background: #66f75d; padding: 20px; } .pagefooter { padding: 20px; background: #d85df7; } 
     <div class="container"> <div class="container__columns"> <div class="column1">1</div> <div class="column2">2</div> <div class="column3">3</div> </div> <footer class="pagefooter">Footer</footer> </div>

    • Thank you for taking the time to solve the problem! Specifically, in my case, flexbox is better suited, therefore I will tick off this solution. - Sideways Gleb
    • Faced with a small problem in your solution; decided to bring the discussion to a separate issue . - Lateral Gleb

    Option if you want to use display: table-cell .

     * { box-sizing: border-box; margin: 0; } .container { min-height: 100vh; } .pagefooter { height: 40px; background: #f75d88; padding: 5px; } .columns { display: table; table-layout: fixed; width: 100%; } .column1, .column2, .column3 { padding: 20px; display: table-cell; height: calc(100vh - 40px); } .column1 { width: 150px; background: #fff8a5; } .column2, .column3 { width: calc(50% - 150px); background: #5db0f7; } .column3 { background: #5df7a2; } 
     <div class="container"> <div class="columns"> <div class="column1"> <p>1</p> </div> <div class="column2"> 2 </div> <div class="column3"> 3 </div> </div> <footer class="pagefooter">footer</footer> </div>