All geek questions in one place

How to create a div based on browser size?

Solved! Ready CSS and HTML at the bottom.

Ok, so here is the situation. I have a page with a div on the side, top and bottom. On the left side is 225 pixels. The top div is 25px and the div below is 20px. What I want is a div in the middle of them all, and therefore it resizes (and scrolls) based on the size of the visitors browser. What I have, but not scrollable and not the correct width, so I need to focus all my content. It just used the width of the browser, but moved a bit with the difference, so it actually hung over the sidebar.

A quick sketch of how it is configured.

Any ideas?

Key: menu - top bottom_menu is the bottom menu. content is the part that I need help in the center. the sidebar is what goes on the side.

CSS

@charset "UTF-8"; /* CSS Document */ html { height:100%; } img { border-style: none; color: #FFF; text-align: center; } body { height:100%; width:100%; margin:0px; padding:0px; background-color:#000; } .sidebar { background-image:url(../images/sidebar/background.png); background-repeat:repeat-y; width:225px; min-height:100%; position:fixed; top:25px; left:0px; overflow:hidden; padding-left:5px; padding-top:5px; font: 12px Helvetica, Arial, Sans-Serif; color: #666; z-index:1; } .menu { background-image:url(../images/top_menu/background.png); background-repeat:repeat-x; width:100%; height:25px; position:fixed; top:0px; left:0px; overflow:hidden; padding-left:5px; } .content { width:100%; top:25px; height:100%; overflow:hidden; position:fixed; padding-left:5px; padding-top:5px; background-color:#FFF; margin-left:112px; font: 14px Helvetica, Arial, Sans-Serif; } .bottom_menu { background-image:url(../images/bottom_menu/background.png); background-repeat:repeat-x; width:100%; height:20px; position:fixed; bottom:0px; left:0px; overflow:hidden; padding-left:5px; z-index:2; font: 12px Helvetica, Arial, Sans-Serif; }

HTML (DIV placement):

 <body> <div class="sidebar">CONTENT IN SIDEBAR</div> <div class="menu">CONTENT IN TOP MENU</div> <div class="bottom_menu">CONTENT IN BOTTOM MENU</div> <div class="content">CONTENT IN CONTENT</div> </body>

CSS ready

 @charset "UTF-8"; /* CSS Document */ img { border-style: none; color: #FFF; text-align: center; } body { background-color:#000; margin:0; padding:0; border:0; /* This removes the border around the viewport in old versions of IE */ width:100%; height:100%; } .sidebar { background-image:url(../images/sidebar/background.png); background-repeat:repeat-y; font: 12px Helvetica, Arial, Sans-Serif; color: #666; z-index:1; min-height:100%; } .menu { background-image:url(../images/top_menu/background.png); background-repeat:repeat-x; height:25px; clear:both; float:left; width:100%; position:fixed; top:0px; z-index:5; background-color:#000; } .bottom_menu { background-image:url(../images/bottom_menu/background.png); background-repeat:repeat-x; height:20px; z-index:2; font: 12px Helvetica, Arial, Sans-Serif; clear:both; float:left; width:100%; position:fixed; bottom:0px; } .colmask { position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */ clear:both; float:left; width:100%; /* width of whole page */ overflow:hidden; /* This chops off any overhanging divs */ min-height:100%; } .sidebar .colright { float:left; width:200%; position:relative; left:225px; background:#fff; } .sidebar .col1wrap { float:right; width:50%; position:relative; right:225px; } .sidebar .col1 { margin:30px 15px 0 225px; /* TOP / UNKNOWN / UNKNOWN / RIGHT */ position:relative; right:100%; overflow:hidden; } .sidebar .col2 { float:left; width:225px; position:fixed; top:0px; left:0px; margin-top:25px; margin-left:5px; right:225px; } .clear { clear: both; height: 1px; overflow: hidden; }

Ready HTML:

 <body> <div class="menu">HEADER CONTENT</div> <div class="colmask sidebar"> <div class="colright"> <div class="col1wrap"> <div class="col1"> CONTENT </div> </div> <div class="col2"> LEFT SIDEBAR CONTENT </div> </div> </div> <div class="bottom_menu">FOOTER CONTENT</div> <div class="clear"></div> </body>
+4
source share
3 answers

Do you mean something like this: "Left menu" 2 columns "Liquid layout" (pixel width) ?

+2
source

CSS doesn't do it well - although it can be done with relative ease.

The problem is that divs are only aware of themselves - they cannot "look at my next brother and make me the same height"

There are ways to use large paddings and negative margins, although they fail on a number of things.

  • Cannot use page linking links. e.g. page.html # section-b
  • In older browsers, it may not print correctly.
  • It is not possible to display elements outside because it sets display: hidden in the container container.

Having said that, it is possible, and I have done this recently several times. The site to which Frank offers in his answer , I began to study it and use it correctly. I would recommend exploring the source and CSS of this page. Firebug can help here.

When the CSS display: table property and its friends become widely supported (IE8 just turned it on), it will be much easier to do this.

+2
source

There is another way to do this using significantly less markup (wrapping elements and other extra, ambiguous tags):

http://jsfiddle.net/zBLbt/23/

Most likely, it will need to be slightly modified to be fully compatible with several browsers, but the benefits of simpler markup outweigh the possible increase in testing.

edit: modified code will be more readable.

0
source

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

More articles:


All Articles