Layout — stretch two sidebars in height

v1z2011-10-02 17:40:43

css

v1z, 2011-10-02 17:40:43

There is such a problem on the page: if there is little content on it (there is no scrolling), the sidebars rest on the bottom, everything is fine. If a large article is open, when scrolling down the page, the sidebars “hang in the air”. You need to squeeze them somehow.

You can reverse the problem by adding position:relative to the body. Then, in large articles, sidebars rest, and in small articles, they break off at the end of the article.

Tried both min-height and height: auto on different elements. Setting min-height: 1000px on #content helped, but this is not a solution to the problem, if the monitor is very large, then the sidebars still hang in the air, and unnecessary scrollbars are added on small ones.

I made this test layout with a description of the problem: vizakenjack.narod2.ru/testpage.html- CSS registered directly in the code.

Answer the question

In order to leave comments, you need to log in

8 answer(s)

zayko, 2011-10-02
@v1z

  <style>
    .body{ width: 850x; border: 1px solid red; }
    .content{ margin: 0 210px; border: 1px solid green; position: relative; }
    .sidebar1{ width: 200px; border: 1px solid blue; position: absolute; top: 0; left: -210px; height: 100%; }
    .sidebar2{ width: 200px; border: 1px solid blue; position: absolute; top: 0; right: -210px; height: 100%; }
  </style>
  <body>
      <div class="body">
      <div class='content'>
        <div class='sidebar1'>Sidebar 1</div>
        <div class='sidebar2'>Sidebar 2</div>
        Content
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
      </div>
    </div><!-- body -->
  </body>

Vladimir Gorobets, 2011-10-03
@vladimir_gorobets

The stubbornness with which they are trying to do what is elementary implemented through table is striking. Often the code of these perverted implementation options is several times greater than the table> tr> td option + there is a chance that somewhere it will not look as intended ... I'm not against div layout, but everything needs to be approached thoughtfully, weighing all the pros and minuses.
Thanks in advance for the minuses, I'm just tired of people inventing a problem for themselves where there is none. After all, there is a ready-made solution that works correctly in all browsers.

Georgy Khromchenko, 2011-10-02
@Mox

I think here
- either use some Javascript layout
- or just use a table. There is no point in religiously clinging to divs here
- you can try to do something with the background, but I don’t like such options

Sergey, 2011-10-02
Protko @Fesor

if done according to the cattle, then you can add for the content block on the right and left along the border, and the same for the siders. And then make a sidebar on one side with a negative margin to the width of the border so that it would float on the next one ... Maybe not the most beautiful way, but it works)

Arthur Koch, 2011-10-02
@dudeonthehorse

there was a more elegant solution. there is a content block with too thick sidebar color borders. and the sidebars themselves are hung as an absolute. minimum hemorrhoids, pure css, but not all designs will work. my answer is similar to Fesor'a but somewhat different.

Petrusha Ukropov, 2011-10-02
@artishok

I stumbled upon it by chance, maybe layout.veselov.sumy.ua will help someone

dsn13, 2011-10-03
@dsn13

Check out this matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks for equal height columns

Stalker_RED, 2011-10-03
@Stalker_RED

Here are a couple dozen ways to make a three-column layout.
Including frameworks and constructors.
Two-column - as a special case of any of these methods.