All geek questions in one place

Stretching DIV all over the screen

So here is my situation:

I have a div (see code below), quite simple. When I run the code, I come to the gray box. BUT, my intention was that this gray square flew from the very beginning of the browser window to the END of this browser window, and what the code below does is create a gray window with what appears to be a white frame.

<div style="height: 30px; background-color: gray; color: white;"> Hey </div>

I apologize for the lack of explanation, but I did not find a good way to say what I was trying to do. Thanks in advance,

Tom.

+4
source share
5 answers

If you want to keep the height:

 <div style="height: 30px; width: 100%; background-color: gray; color: white;"> Hey </div>

Also, to get rid of white borders, add the following: body { padding: 0; margin: 0 } body { padding: 0; margin: 0 }

+2
source

If you want the div to fill all the free space, use the following:

 width: 100%; height: 100%;

You can determine the size as a percentage of the available space.

+2
source

If you understand correctly, you need to set the width to 100%

 <div style="width: 100%; height: 30px; background-color: gray; color: white;"> Hey </div>
+2
source

Add width:100%; to say div to fill the entire horizontal space.

+2
source 
 <head> <style> body { padding: 0; margin: 0; } </style> </head> <body> <div style="height: 30px; width: 100% background-color: gray; color: white;"> Hey </div> </body>

I assume that you want your div to be 30px high and wide in full. To do this, you just set the div width to 100% and make sure that the body has no indentation (this may slightly change your elements on the right. I recommend using reset.css)

Hope this helps!

+2
source

Source: https://habr.com/ru/post/1489556/

More articles:


All Articles