1 Replies - 156 Views - Last Post: 21 September 2017 - 05:20 AM

#1 CTphpnwb  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3714
  • View blog
  • Posts: 13,468
  • Joined: 08-August 08

100% height only goes to window height

Posted 19 September 2017 - 04:28 PM

The aBox style is using the window height, but I want it to be the body height.
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        .sample {
            padding: 20px;
            background: grey;
        }
        .sample1 {
            background: #ffaaaa;
            margin: 20px;
        }

        .aBox {
            position: absolute;
            top: 0;
            botom: 0;
            padding: 5px;
            color: #ffffff;
            background: red;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="aBox">testing</div>
<div class="sample">

    <div class="sample1">
        lorem impsum...<br><br>
        lorem impsum...<br><br>
        lorem impsum...<br><br>
        lorem impsum...<br><br>
        lorem impsum...<br><br>
        lorem impsum...<br><br>
        lorem impsum...<br><br>
        lorem impsum...<br><br>
        lorem impsum...<br><br>
    </div>

    <div class="sample1">
        lorem impsum...<br><br>
        lorem impsum...<br><br>
        lorem impsum...<br><br>
        lorem impsum...<br><br>
        lorem impsum...<br><br>
        lorem impsum...<br><br>
        lorem impsum...<br><br>
        lorem impsum...<br><br>
        lorem impsum...<br><br>
    </div>

    <div class="sample1">
        lorem impsum...<br><br>
        lorem impsum...<br><br>
        lorem impsum...<br><br>
        lorem impsum...<br><br>
        lorem impsum...<br><br>
        lorem impsum...<br><br>
        lorem impsum...<br><br>
        lorem impsum...<br><br>
        lorem impsum...<br><br>
    </div>

    <div class="sample1">
        lorem impsum...<br><br>
        lorem impsum...<br><br>
        lorem impsum...<br><br>
        lorem impsum...<br><br>
        lorem impsum...<br><br>
        lorem impsum...<br><br>
        lorem impsum...<br><br>
        lorem impsum...<br><br>
        lorem impsum...<br><br>
    </div>

</div>

</body>
</html>



Is This A Good Question/Topic? 0
  • +

Replies To: 100% height only goes to window height

#2 ge∅  Icon User is offline

  • D.I.C Lover

Reputation: 180
  • View blog
  • Posts: 1,126
  • Joined: 21-November 13

Re: 100% height only goes to window height

Posted 21 September 2017 - 05:20 AM

Due to the fact that the body height is set to auto, you can't target it with CSS unless you use a display mode which is meant to handle this. I would try to play with display table or flex.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1