发表新帖
发表新帖

Full-height CSS layout, with multiple columns

前端 未结
关注
6 590
暗喜
暗喜 2020-12-10 23:10

I have a layout that is working, but it has one very annoying problem.. when the content is taller than the screen, the background stops.

This is the desired layout

相关标签:
6条回答
  • 孤城傲影
    2020-12-10 23:34

    Add this after <div id="right">...</div>:

    <div style="clear: both; font-size: 1px; line-height:1px">&nbsp;</div>
    0 讨论(0)
  • 佛祖请我去吃肉
    2020-12-10 23:38

    Here's what I ended up using, using this technique of high value for padding-bottom, with an equal but inverted value in margin-bottom - then you set overflow:hidden on the div enclosing that huge margin.

    It's rather hackish, but it works! I now have a full-height, a single em-defined width, and a full-height background-image down each side! There's not much extra markup (a container div, a div for each of the three columns)

    <html>
<head>
    <title>Yay</title>
    <style type="text/css" media="screen">
        body, html{
            height:100%;
            margin:0;
            background:#1d4b76;
        }
        #contain{
            width:40em;
            margin-left:auto;
            margin-right:auto;
            overflow:hidden;
        }
        #left{
            background-image:url("static/grad_left.png");
            background-repeat:repeat-y;
            background-position:right;

            height:100%;
            float:left;
            width:150px;

            padding-bottom:10000px;
            margin-bottom:-10000px;
        }
        #middle{
            float:left;
            background:#000;
            color:#fff;
            width:20em;

            padding-bottom:100000px;
            margin-bottom:-100000px;
        }
        #right{
            float:left;
            background-image:url("static/grad_right.png");
            background-repeat:repeat-y;
            background-position:left;
            width:150px;

            padding-bottom:100000px;
            margin-bottom:-100000px;
        }
    </style>
</head>
<body>
    <div id="contain">
        <div id="left">
            &nbsp;              
        </div>
        <div id="middle">
                    Put lots of text here
        </div>
        <div id="right">
            <img src="static/logo.png" width="150" height="150" alt="Logo">
        </div>
    </div>
</body>
</html>
    0 讨论(0)
  • 执笔经年
    2020-12-10 23:42

    Given that you have your gradients in seperate columns to the left and right, you need to implement "faux columns".

    If you're after elastic versions, have a look at Elastic Faux Columns and Multi-Column Layouts Climb Out of the Box.

    0 讨论(0)
  • 梦如初夏
    2020-12-10 23:45

    Try with this modifications:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Test page</title>
 <style type="text/css" media="screen">
   html, body{
     margin: 0 auto 0 auto;
     padding:0;
     width:22em;
   }

   #wrapper{
      background-color:#ccc;
   }

   #left{
      float:left;
      width:22em;
      background-color:#00f;
    }

    #middle{
       float:right;
       width:18em;
       margin-right:2em;
       background-color:#f00;
     }

     #right{
        float: right;
        width:20em;
        background-color:#0f0;
        background-image: url(static/logo.png);
        background-position: top right;
        background-repeat: no-repeat;
      }

   </style>
   </head>
   <body>
     <div id="wrapper">
       <div id="left">
          <div id="right">
             <div id="middle">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br><br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br><br>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br><br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in oluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br><br>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br><br>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br><br>
             </div>
           </div>
         </div>
       </div>
   </body>
</html>
    0 讨论(0)
  • 佛祖请我去吃肉
    2020-12-10 23:47

    Got there in the end with this one, but had to make a few changes to your markup and the images.

    1. Remove the #left and #right divs.
    2. Make a new single background image that's 592px wide, transparent background and has the gradients at the left and right of it - a 1px high image with left gradient - transparent section 504px wide - right gradient.
    3. Add the logo to the #wrapper, just before the #middle

    So the markup looks like this now:

    <body>
    <div id="wrapper">
        <img src="static/fifestock_logo.png" />
        <div id="middle">
        ... etc ...
        </div>
    </div>
</body>

    Then, the relevant changes in the stylesheet are:

    #wrapper{
    height:100%;
    width:805px;
    margin-left:auto;
    margin-right:auto;
    text-align: right;
}

#middle {
    width:504px;
    padding: 0 44px;
    margin: -154px auto 0 auto;
    background:#000 url(new_bg.png) repeat-y top left;
}

    Looks fine to me.

    Only tested in in FF3 and Opera (running Linux without access to Windows / Mac atm) but I don't think there should be any big issues with it in IE / Opera.

    0 讨论(0)
  • 别那么骄傲
    2020-12-10 23:57

    I just watched a video about YUI's grids and looked very promising (recommended watching!). I haven't had the time to test it out, yet, but most probably will do so in the future. It might be what you want.

    0 讨论(0)
 看不清?
提交回复
热议问题