发表新帖
发表新帖

Multiple vertical 100% height & width divs

后端 未结
关注
2 1433
挽巷
挽巷 2021-01-24 05:38

I\'m trying to create multiple divs with 100% both width & height, but keep failing miserably. Example:



    


        

                      

              相关标签:
2条回答
  • 情歌与酒
    2021-01-24 06:00

    From what I understand of HTML and CSS if you create 2 divs that have a width and height of 100% and place them in the same containing div, you will only see 1 of the divs because they are both the exact same height and width and are placed on top of each other.

    EDIT: Sorry I was thinking of inline elements and z-index (here is the code to get what you want done, if I am reading your post correctly

    <html>
<head>
    <title>Test</title>
    <style>
        #wrapper {
            width: 498px;
            height: 498px;
            border: 2px solid #000000;
        }

        #box1 {
            width: 100%;
            height: 100%;
            background-color: rgba(255, 0, 0, 0.5);
        }
        #box2 {
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 255, 0.5);
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="box1"></div>
        <div id="box2"></div>
    </div>
</body>

    I hope that works!

    EDIT: You can change the container div to be whatever height you want it to be to further customize this :D, now you can use your intuition to create what you were hoping to create!

    0 讨论(0)
  • 暖寄归人
    2021-01-24 06:05

    The solution is first reset default values for margin and padding:

    * {
  margin:0;
  padding:0;
}

    Second make your html and body be the 100%:

    html, body {
   height:100%;
}

    Then your dimension for divs:

    #wrapper, #one, #two {
   width:100%;
   height:100%;
}

    You can't assign numeric values for id or class on the first charachter

    The demo http://jsfiddle.net/3fCZg/

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