Help positioning div css

Question

Help positioning div css

Navigation

#1 by (2 votes)
#2 by (2 votes)
#3 by (2 votes)

3

How do I make sure that my <div id="rosa"> occupies the entire available area even when the window is resized and not a specific 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

asked by anonymous 05.07.2017 / 15:30

3 answers

2

In your CSS file, leave #rosa like this

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

05.07.2017 / 15:42

2

To fill the entire screen, you need to set position:absolute , height: 100% and width: 100% . If the div position is not absolute, it will not only work with height and width having total percentage. See it 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>

05.07.2017 / 16:11

How to make the code not catch the ASCII Code of a variable? How to center the map in the middle of the polygon?

score 2 · Accepted Answer

I've made a total restructuring to better meet what you described, but in the case of good responsiveness, it would be ideal to address it in other ways. Here is an example of me mainly appropriating units vh and vw so that it always follows the same structure independent of screen size:

EDIT 2 - BLUE WITHIN THE ROSE:

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>