Layout Sizing

0

How to solve this layout problem. By reducing the screen the div contracts, not taking up any screen space. Basically I defined a width and height in px.

    
asked by anonymous 17.10.2018 / 15:51

1 answer

1

Hypothesis

Based on the image provided, you have a block with a certain value of height and gray background. And you need this block to stretch horizontally across the page at all times.

Code

Following what has been mentioned, this result can be achieved using such a code:

html { margin: 0; padding: 0; }
body { margin: 0; padding: 0; }
.header {
  width: 100%;
  height: 50px;
  background: #CCC;
}
<div class="header">

</div>

Explaining

The first two lines of the CSS serve to ensure that your block is pasted to the edges of the page. Now the third line with class .header is the class that would be applied in its gray block of the image, I used the value of 50px as stimulator.

But most important is width: 100%; , first property of class .header because it makes the element always have the width equivalent to 100% of the width of the first found parent element. As I assume there is no element as its parent, the element will be the html document itself, so it will be 100% relative to the whole page.

    
17.10.2018 / 16:13