Responsive Set width and height to 80%

问题

I have a problem for set responsive width and height to a container.

I need to set height and width of the container in 80% of my screen, but thats not work (i think because body have no height and width).

thats an exemple code :

<div id="container">
    <div class="box">
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
    </div>
    <div class="box">
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
    </div>
</div>

#container
{
    width:100px;
    height:100px;
    background-color:blue;
    padding:5px;
    margin-left:auto;
    margin-right:auto;
}

.box
{
    width:100%;
    height:50%;
    background-color:red;
}

.element
{
    width:22.5%;
    height:96%;
    margin:1%;
    background-color:yellow;
    float:left;
}

Thats the JSFIDDLE: https://jsfiddle.net/trsjc7cw/

Thanks a lot for your help !

回答1:

#container {

  width: 80vw;

  height: 80vh;

  background-color: blue;

  padding: 5px;

  margin: auto;

}

.box {

  width: 100%;

  height: 50%;

  background-color: red;

}

.element {

  width: 22.5%;

  height: 96%;

  margin: 1%;

  background-color: yellow;

  float: left;

}

<div id="container">
  <div class="box">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
  <div class="box">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
</div>

use vw and vh units!

回答2:

You should only need a wrapper around your <div> that is 100 view width and 100 view height.

<div id="wrapper">
    <div id="container">
        <div class="box">
             <div class="element"></div>
             <div class="element"></div>
             <div class="element"></div>
             <div class="element"></div>
        </div>
        <div class="box">
            <div class="element"></div>
            <div class="element"></div>
            <div class="element"></div>
            <div class="element"></div>
        </div>
    </div>
</div>



#wrapper {
    height: 100vh;
    width: 100vw;
}
#container {
    height: 80%;
    width: 80%;
}

You can also use your body as the wrapper. Just make sure that you set the height and width of the <body> and <html> elements to 100% in the css.

来源：https://stackoverflow.com/questions/34089994/responsive-set-width-and-height-to-80

标签

html5

css3

height

width