发表新帖
发表新帖

DIV height set as percentage of screen?

前端 未结
关注
5 1393
夕颜
夕颜 2020-12-08 01:24

I\'m looking to set a parent DIV as 70% of the full 100% screen height. I\'ve set the following CSS but it doesn\'t seem to do anything:

body {
font-family:
相关标签:
5条回答
  • 后悔当初
    2020-12-08 02:14

    If you want it based on the screen height, and not the window height:

    const height = 0.7 * screen.height

// jQuery
$('.header').height(height)

// Vanilla JS
document.querySelector('.header').style.height = height + 'px'

// If you have multiple <div class="header"> elements
document.querySelectorAll('.header').forEach(function(node) {
  node.style.height = height + 'px'
})
    0 讨论(0)
  • 南旧
    2020-12-08 02:24

    By using absolute positioning, you can make <body> or <form> or <div>, fit to your browser page. For example:

    <body style="position: absolute; bottom: 0px; top: 0px; left: 0px; right: 0px;">

    and then simply put a <div> inside it and use whatever percentage of either height or width you wish

    <div id="divContainer" style="height: 100%;">
    0 讨论(0)
  • 不知归路
    2020-12-08 02:25

    Try using Viewport Height

    div {
    height:100vh; 
}

    It is already discussed here in detail

    0 讨论(0)
  • 滥情空心
    2020-12-08 02:28

    This is the solution ,

    Add the html also to 100%

    html,body {

   height: 100%;
   width: 100%;

}
    0 讨论(0)
  • 抹茶落季
    2020-12-08 02:30

    make position absolute for that div.

    http://jsfiddle.net/btevfik/KkKeZ/

    0 讨论(0)
 看不清?
提交回复
热议问题