发表新帖
发表新帖

Bootstrap *vertical* responsiveness

前端 未结
关注
1 1085
难免孤独
难免孤独 2021-01-28 15:41

Without delegating width management to Bootstrap, I can get three full-height columns

with the following HTML/CSS.
相关标签:
1条回答
  • 萌比男神i
    2021-01-28 15:55

    How do I set the height to 100% when the widths are managed by Bootstrap?

    I'm going to cite my friend James for this one:

    There are a couple of relatively new CSS3 measurement units called:

    Viewport-Percentage (or Viewport-Relative) Lengths.

    https://stackoverflow.com/a/16837667/3305454

    What do these 'viewport' units do?

    Where normally, 100% is relative to the parent element, 100vh or 100vw do not respect their initial parents, but focus entirely on the users viewport, which is their exact screen. An example (also stolen from James):

    <body style="height:100%">
    <div style="height:200px">
         <p style="height:100%; display:block;">Hello, world!</p>
    </div>
</body>

    The p tag here is set to 100% height, but because its containing div has 200px height, 100% of 200px becomes 200px, not 100% of the body height. Using 100vh instead means that the p tag will be 100% height of the body regardless of the div height.

    Your solution would be to apply this CSS rule to the elements:

    .left, .middle, .right {
    min-height: 100vh;
}
    0 讨论(0)
 看不清?
提交回复
热议问题