I’m making this layout http://www.freepsd.ws/75-kulinarnyy-psd-maket-fastyfood.html , for the right block #sidebar I set float: right, but since the content does not occupy the entire height of the block, then when the content is in the sidebar ends, the block is no longer displayed link text
How to set the sidebar height regardless of the height of the content? min-height: 100% and height: 100% did not help.

    2 answers 2

    In order for min-height: 100% and height: 100% to work, the parent must have a height different from auto;

    When we try to stretch the site to the full height, what are we doing? Sets height: 100% to both block and body, and html.

    Since it is not always possible to set a certain height to the parent unit, then to solve this problem (dividing a site into 2 columns highlighted in different colors, but of the same height), you can use a picture. Cut a picture with a height of 1px and a width equal to the right column. Put the parent block on the background and position it under the right column. Set the repeat-y background. So visually it turns out 2 columns. And the real right column will have a transparent background and a smaller height (by content), but this will not strain anyone.

    In your example:

    #main {background: url('картинка с серым фоном') 663px 0 repeat-y #fff;} #sidebar {background:none;}
    • And the option that was further proposed, through the jQuery plugin, leveling the height of the blocks, would be a good solution in this case or not? - Heidel 3:51
    • one
      I consider it bad in this case due to the fact that you can do without javascript and I do not see the point of its use in this case. We do not need to have physically identical columns of the same height. We need to visually file them highlighting color. This can be done using css and a picture. Loading unnecessary scripts where this can be avoided is not the best experience :) At the same time, there may be situations when the columns load at different heights, and then align themselves and the user sees the jumping moment. - iKuzko
    • Understand, thanks, now I will try to make a picture. But because of this, when using the plug-in, there may be situations when the columns load at different heights, and then align and the user sees the jumping moment? - Heidel 4:02

    if I understand correctly, then you need to align these two blocks in height ... that is, such a solution

    • thanks, come in handy) - Heidel