发表新帖
发表新帖

Making a div fit the initial screen

后端 未结
关注
10 946
谎友^
谎友^ 2020-12-04 17:49

I want to make a div fit the initial height and width of a users screen.

I think the following crudely drawn diagram explain this better:

相关标签:
10条回答
  • 刺人心
    2020-12-04 18:30

    You can do this completely with CSS too:

    html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    width: 100%;
}

div {
    height: 100%;
    width: 100%;
}
    0 讨论(0)
  • 我在风中等你
    2020-12-04 18:34

    Setting your height to 100% in a div only means that your div will fill 100% of its container; not 100% of the page.

    I would suggest that you would either want to use a min-height declaration on your div or its container or use JavaScript to find the initial height of the user's screen (because everybody will have something slightly different) and set that as an inline style on your div.

    Code something along the lines of the following will return the screen dimensions:

    var x,y;
if (self.innerHeight) // all except Explorer
{
  x = self.innerWidth;
  y = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
// Explorer 6 Strict Mode
{
  x = document.documentElement.clientWidth;
  y = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
  x = document.body.clientWidth;
  y = document.body.clientHeight;
}
    0 讨论(0)
  • 孤城傲影
    2020-12-04 18:38

    i think this is the easiest way... by letting the browser tell he height... using java script

    ` 

    <html>
<head>
<title>viewport</title>
<style type="text/css">
  * { padding:0; margin:0; }
  #test { background:#aaa; height:100%; width:100%; }
</style>
<script type="text/javascript">
  window.onload = function() {
    var height = getViewportHeight();
    alert("This is what it looks like before the Javascript. Click OK to set the          height.");
    if(height > 0)
      document.getElementById("test").style.height = height + "px";
  }
  function getViewportHeight() {
    var h = 0;
    if(self.innerHeight)
      h = window.innerHeight;
    else if(document.documentElement && document.documentElement.clientHeight)
      h = document.documentElement.clientHeight;
    else if(document.body) 
      h = document.body.clientHeight;
  return h;
  }
</script>
 </head>
 <body>
  <div id="test">
  <h1>Test</h1>
  </div>
  </body>
 </html>`
    0 讨论(0)
  • 执笔经年
    2020-12-04 18:40 
    <html><body style="margin: 0;">
<div style="height: 100%; width: 100%; background: #ccc;">a</div>
<div style="background: #777;height: 100%; width: 100%">b</div>
</body>
</html>

    works for me

    0 讨论(0)
  • 渐次进展
    2020-12-04 18:41 
     <style>
    body    {
        margin:0;
        padding:0;
    }
    #try    {       
        height:100%;
        width:100%;
        margin:0;
        padding:0;
        clear:both;
    }
    #next   {
        height:10%;
    }
    </style>

    <body>
    <div id="try">hello1</div>
    <div id="next">hello2</div>
</body>

    works for me.

    0 讨论(0)
  • 孤独总比滥情好
    2020-12-04 18:42

    For clarification...

    I'd use vh and vw(viewport height & viewport width)

    <html>
 <body>
  <div style="height:100vh;width:100vw">First screen section, fills a whole screen</div>
  <div style="height:100vh;width:100vw;">Hmm... this too</div>
 </body>
</html>

    100% Doesn't work because it fills 100% of a container(body) only, not a screen.

    Edit: A few browsers don't support it, but I find that most modern browsers do

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