Question 88779 in Html Question posted in
Some basic documentation can be found here.

How do I get div's or tr's to obey a fixed percentage height, rather than altering the height seemingly randomly based on font size? – Html

I want to create either a table or 3 separate divs, I don’t care which. All I’m trying to do is partition the screen into 20% on the top, 60% in the middle, and 20% on the bottom. I have somewhat accomplished that with the below code; however, if I make the font even remotely large in the top div or tr, it begins to invade on the space of the middle and bottom sections, and the page ends up not only having a larger top section than bottom section, it also goes off the bottom and adds a scroll bar. In other words, it’s ignoring my 20% height allocation, which is really cool and awesome.

body {
    margin: 0px;
    padding: 0px;
}

.small {
    height: 20vh;
    max-height: 20vh;
    min-height: 20vh;
}

.large {
    height: 60vh;
    max-height: 60vh;
    min-height: 60vh;
}
 <body>
        <table>
            <tr class="small"></tr>
            <tr class="large"></tr>
            <tr class="small"></tr>
        </table>
    </body>

How do I enforce that 20% limit so that even if the font is larger in the top section, it doesn’t go and start allocating more space than I told it to?

Tags:

2

Answers


  1. 0

    If i understand correctly, You can achieve this layout using Grid.
    Below i used three div and one main wraper.

    While using rem as unit for width or height, if we change the parent font-size it will affect the child values also

    body {
    margin: 0px;
    padding: 0px;
    box-sizing:border-box;
}
main{
  display: grid;
  grid-template-columns: 100vw;
  grid-template-rows: 20vh 60vh 20vh;
}
div{
  border:1px solid grey;
  padding:10px;
}
    <main>
 <div>I am small</div>
 <div>I am Big</div>
 <div>I am small</div>
</main>
    Login or Signup to reply.
  2. 0 
    body {
  margin: 0;
}
main {
  display: grid;
  grid-template-columns: 100vw;
  grid-template-rows: 20vh 60vh 20vh;
}
div {
  border: 1px solid red;
}
    <main>
  <div>I am small 20%</div>
  <div>I am Big 60%</div>
  <div>I am small 20%</div>
</main>

    20% on the top, 60% in the middle, and 20% on the bottom

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search