splitting screen into two halves horizontally-CodePudding

Could you please advise how to divide the screen into two halves horizontally? Here is my attempt, but the height=100% kind of doesn't work. (I intend the whole screen to be covered) How can I make it work? Thank you.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hey I am a title</title>
    <style>
    .t7{width: 50%; height: 100%; background-color: #506970; }
    </style>
</head>
<body>


<div class=t7>aaa</div>

<div class=t7>bbb</div>


</body>
</html>

CodePudding user response：

Both the html and body tag should have their width and height properties set to 100%. By default the height won't be 100%, which is why these elements do not expand vertically. As a side note, you might also want to set the margin (specifically on the body) to zero.

Also, whitespace between elements can cause problems when you are trying to use up 100% of the width. And because you are using div elements, you will want to set their 'display' property to 'inline-block'. By default they use 'block', which causes a line break (effectively) after the element, so the two elements wouldn't be side-by-side.

Try this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hey I am a title</title>
  <style>
    html, body { width: 100%; height: 100%; padding: 0; margin: 0; }
    .t7{width: 50%; height: 100%; background-color: #506970; display: inline-block; }
  </style>
</head>
<body>

  <div class=t7>aaa</div><div class=t7>bbb</div>

</body>
</html>

CodePudding user response：

In this case you can use vh units for the screen height. vh – Relative to 1% of the height of the viewport.

Your code will look like that:

.html

<div class="top"></div>
<div class="bottom"></div>

.css

.top, .bottom {
  height: 50vh;
}

As a result, the screen will be splitter in half horizontally.

CodePudding user response：

In order for the CSS height property to work using percentages, the parent element must have a defined height. So to fix this, you must git the <body> a height of 100%. But in order for that to work, you must also give the <html> a height of 100%.

html, body { height: 100% }

Another option is to use the viewport width/height vw/vh measurement instead of percentage based measurement.

.t7 { width: 50vw; height: 100vh; ... }