Geek Answers Handbook

How to keep background color wide when browser window gets narrower

Here is the whole page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style> body {margin: 0; background: yellow;} .bar {width: 100%; background: pink;} .content {width: 800px; margin: 0 auto;} </style> </head> <body> <div class="bar"> <div class="content"> This is content~ </div> </div> </body> </html>

My intention is for the pink bar to fill the entire horizontal length of the browser screen. The contents of the panel remain centered when the specified window has a width of more than 800 pixels or remains stationary and scrolls horizontally when it is narrower. However, when the browser gets narrower, and if you scroll the right side, the pink bar does not reach the desired end; in this case, the corpus luteum is visible instead.

See this problem in recent versions of Firefox, Chrome, and IE8.

+4
source share
2 answers

you must either turn the content background pink

 .content {width: 800px; margin: 0 auto;background: pink;}

or

make the minimum bandwidth as the width of the content.

 .bar {width: 100%;min-width:800px;background: pink;}
+2
source

It is best to set min-width equal to the width of the content.

If you are trying to create a website for iphone and tablets, then you can determine the width for each viewing port separately.

0
source

More articles:


All Articles