CODEWITHSUNDEEP
htmlcss
Luciano Nascimento
Luciano Nascimento

Reputation: 2600

Div not respecting height percentage

I would like to have an ADS fixed on the right side when landscape (25% width) or on the bottom when portrait (25% height).

Landscape is working fine, but on portrait it's not respecting the 25% of the main div.

<div id="container">
    <div id="header"></div>
    <div id="main" class="ORIENTATION">
        <div id="queue"></div> <!-- 75% -->
        <div id="ads"></div> <!-- 25% -->
    </div>
</div>

Landscape Example: https://jsfiddle.net/gmrn24yd/9/

Portrait Example: https://jsfiddle.net/gmrn24yd/8/

Upvotes: 0

Views: 1411

Answers (3)

Laxmikant Dange
Laxmikant Dange

Reputation: 7688

The problem was with your header, It was taking 70px and Your #main height is 90%, It can't What if 70px is greater than 10% of the document? It will push other div down and thats why ads portions is getting cutoff. The solution is The height of #main should be based on header aswell. You can use calc function of css to calculate. Do some RnD and check browser compatibility for this. Here is the mdn documentation for calc.

Here is the solution of your problem.

*{
    box-sizing:border-box;
}
#container {
  width: 100%;
  height: 100%;
  position: fixed;
  padding: 0;
  margin: 0;
  top: 0;
  left: 0;
  display: inline-block;
}

/* HEADER */
#header {
  width: 100%;
  height: 70px;
  position: relative;
  background: #ed1c24;
  padding: 20px 0;
}

/* MAIN */
#main {
  width: 100%;
  height: calc(100% - 70px); /*Calculate height based on header*/
  position: relative;
  text-align: center;
}

/* MAIN LANDSCAPE */
#main.landscape {
  display: inline-block;
}

#main.landscape #queue {
  width: 75%;
  height: 100%;
  float: left;
}

/* MAIN PORTRAIT */
#main.portrait {
  display: block;
}

#main.portrait #queue {
  width: 100%;
  height: 75%;
}

/* LANDSCAPE ADS */
#main.landscape #ads {
  width: 25%;
  height: 100%;
  float: right;
  background: #000;
}

/* PORTRAIT ADS */
#main.portrait #ads {
  width: 100%;
  height: 25%;
  background: #000;
}
<div id="container">
    <div id="header"></div>
    <div id="main" class="portrait">
        <div id="queue"></div>
        <div id="ads"></div>
    </div>
</div>

Upvotes: 1

Alias Varghese
Alias Varghese

Reputation: 2172

I could not see any problem while running this code. Only thing since you have given 100% height and width for the container view is cut off. You can verify the code by providing a fixed width and height for the outer container

Upvotes: 0

Mosh Feu
Mosh Feu

Reputation: 29257

He doe's respect the height, it's just you can't see it because his bottom area is out of the body and his position is fixed. If you use chrome and you know how to see the width and the height of the element you will see it. Look the images:

image 1

image 2

Upvotes: 0

Related Questions