Assist positioning div css

Asked

Viewed 78 times

3

How should I proceed so that my <div id="rosa"> occupies the entire available area even when the window is resized and not a specified height?

html,
body {
    margin: 0;
    padding: 0;
}

header {
    width: 100%;
    background: yellow;
    position: fixed;
    top: 0;
    height: 100px;
    z-index: 100;
}

#corpo {
    position: relative;
    min-height: 100%;
    /* Sizing - any length */
    padding: 100px 0 30px 0;
    /* Header height and footer height */
    margin: 0 auto 0 auto;
    /* Center corpo */
}

#menu {
    background: red;
    width: 200px;
    top: 100px;
    bottom: 20px;
    left: 0;
    position: fixed;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

#conteudo {
    background: green;
    margin-left: 200px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

#campos {
    height: 80px; 
    background-color: blue;
}

#rosa {
    background-color: pink;
    height: 400px;
}

footer {
    background: yellow;
    width: 100%;
    position: fixed;
    bottom: 0;
    height: 20px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>teste</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <!-- Always on top: Position Fixed-->
    <header>
        header
    </header>
    <!-- Fixed size after header-->
    <div id="corpo">
        <!-- Always on top. Fixed position, fixed width, relative to corpo width-->
        <div id="menu">
            menu-left
        </div>
        <!-- conteudo div with main corpo -->
        <div id="conteudo">
            <div id="campos"></div>
            <div id="rosa">
                a
            </div>
        </div>
    </div>
    <!-- Always at the end of the page -->
    <footer>
        footer
    </footer>
</body>

</html>

css

  • It depends. Do you want the whole page to be static? Does your content all go in pink div? There should be a scroll?

  • My content goes in pink div with scroll if necessary. Thanks for the layout.

  • You want some responsiveness?

  • At first no.

3 answers

2

in your CSS archive leave #pink like this

    #rosa {
        background-color: pink;
        height: 100%;
        width: 100%
    }

2

To fill the entire screen, you need to set position:absolute, height: 100% and width: 100%. If the position of div not be absolute, will not work only with height and width having total percentage. See working:

html,
body {
    margin: 0;
    padding: 0;
}

header {
    width: 100%;
    background: yellow;
    position: fixed;
    top: 0;
    height: 100px;
    z-index: 100;
}

#corpo {
    position: relative;
    min-height: 100%;
    /* Sizing - any length */
    padding: 100px 0 30px 0;
    /* Header height and footer height */
    margin: 0 auto 0 auto;
    /* Center corpo */
}

#menu {
    background: red;
    width: 200px;
    top: 100px;
    bottom: 20px;
    left: 0;
    position: fixed;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

#conteudo {
    background: green;
    margin-left: 200px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

#campos {
    height: 80px; 
    background-color: blue;
}

#rosa {
    background-color: pink;
    height: 100%;
    width: 100%;
    position:absolute
}

footer {
    background: yellow;
    width: 100%;
    position: fixed;
    bottom: 0;
    height: 20px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>teste</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <!-- Always on top: Position Fixed-->
    <header>
        header
    </header>
    <!-- Fixed size after header-->
    <div id="corpo">
        <!-- Always on top. Fixed position, fixed width, relative to corpo width-->
        <div id="menu">
            menu-left
        </div>
        <!-- conteudo div with main corpo -->
        <div id="conteudo">
            <div id="campos"></div>
            <div id="rosa">
                a
            </div>
        </div>
    </div>
    <!-- Always at the end of the page -->
    <footer>
        footer
    </footer>
</body>

</html>

  • It got kind of weird. I wish the <div id="menu"> stayed fixed (is overlapping). I tried to put width: calc(100% - 200px); (I don’t know if it’s around... I don’t have much intimacy with css) and it worked for width but for height no.

  • @Alaerciomazutti but there already another problem. At first you said to the <div id="pink"> occupy the total area. This answer does not answer that?

2


I did a total restructuring to better suit what you described, but in the case of good responsiveness, it would be ideal to approach in other ways. An example follows me appropriating mainly units vh and vw so that it always follows the same structure independent of the screen size:

EDIT 2 - BLUE INSIDE PINK:

html,
body {
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  background: yellow;
  position: fixed;
  top: 0;
  height: 100px;
  z-index: 100;
}

#corpo {
  position: relative;
  min-height: 100%;
  margin: 100px auto 0 auto;
  width: 100%;
  height: calc(100vh - 120px);
}

#menu {
  background: red;
  width: 200px;
  top: 0;
  left: 0;
  height: calc(100vh - 120px);
  position: absolute;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

#conteudo {
  background: green;
  margin-left: 200px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
}

#campos {
  width: 100%;
  height: 80px;
  background-color: blue;
}

#rosa {
  background-color: pink;
  position: absolute;
  width: 100%;
  height: calc(100vh - 120px);
  overflow-y: scroll;
}

footer {
  background: yellow;
  width: 100%;
  position: absolute;
  bottom: 0;
  height: 20px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>teste</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <!-- Always on top: Position Fixed-->
  <header>
    header
  </header>
  <!-- Fixed size after header-->
  <div id="corpo">
    <!-- Always on top. Fixed position, fixed width, relative to corpo width-->
    <div id="menu">
      menu-left
    </div>
    <!-- conteudo div with main corpo -->
    <div id="conteudo">
      <div id="rosa">
        <div id="campos"></div>
        TESTE<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      </div>
    </div>
  </div>
  <!-- Always at the end of the page -->
  <footer>
    footer
  </footer>
</body>

</html>

  • Thank you for your reply but I would like the heights and widths of the other elements to remain fixed and not proportional.

  • @Alaerciomazutti Check my edition

  • When placing content in <div id="rosa"> (several rosa1<br /> for example) scroll appears that this rolling everything. I tried to put overflow-y: scroll; in <div id="rosa"> even worked but I would like the scroll to also cover the <div id="campos">.

  • What do you mean? The blue bar has to move together? Or do you want the scroll bar on top of the blue band, but without affecting it?

  • @Alaerciomazutti I made a new edition. See if it suits you.

  • Perfect @Leonfreire. Thank you very much. My up doesn’t appear. .kkkk.. How much to catch with this css. I resisted several times the desire to put a table.. rsrs.

  • @Alaerciomazutti Hahaha... With the time you get it. If solved, please just accept the question as correct.

  • 1

    Done. I’m learning it here too. Thanks.

  • @Alaerciomazutti Nada! Hugs and good luck there!

Show 4 more comments

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.