Dimensioning of Layout

Asked

Viewed 76 times

0

How to solve this layout problem.By reducing the screen to div contracts ,not occupying all screen space. Basically I defined a width and a height in px.inserir a descrição da imagem aqui

css
  • 2

    Hi Thiago all good, it was not very clear what you need, but if defined in px the width dimension and height this measure is fixed indifferent to the size of your screen. For a full fill you can use both the percentage in width 100% and also for height use the measure vh.

  • can provide the css code you are using?

  • 1

    Put your code there :P to see what might be causing this, but if I understand correctly, you’re using the largura in px, instead, define it using % - width: 100%; I hope I helped, something warns me that I edit!

  • This should be put as a comment, not a response. https://answall.com/help/how-to-answer

  • I have no right to comment, until when I tried, accused that I needed 50 points, and as no one had answered so far I wanted to help him

  • take a closer look at these factors before next time!

  • See this you might be interested in https://answall.com/questions/288053/media-query-para-diferentes-n%C3%Adveis-de-zoom/288067#288067 and this tb https://answall.com/questions/271872/d%C3%Bavida-em-rela%C3%A7%C3%A3o-ao-zoom-no-media-query/271885#271885

  • I was able to solve it with the %. Thanks for the help!!

  • The fact that you cannot comment does not mean that you can use this field incorrectly for comments. I recommend that you avoid doing this, because you run the risk of being negative and the system blocks you from responding on the site.

Show 4 more comments

1 answer

1


Hypothesis

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

Code

Following what has been mentioned, this result can be achieved using such 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 glued to the edges of the page. The third line with the class .header is the class that would be applied to your gray block image, I used the value of 50px as stimulative.

But the most important thing is width: 100%;, first class property .header because it makes the element always have the width equivalent to 100% the width of the first parent element found. Since I suppose there is no element as his parent, the element will be the html document itself, so it will be 100% page-wide.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.