How to create a table-like CSS layout with DIVs?

前端未结

关注

 4  1642

UPDATE 2

I found a tentative solution that currently works for me in Chrome on Mac OS X. You can check out my answer below for details. For those of you who are sti

相关标签:

4条回答

盖世英雄少女心

2020-12-19 23:38

based on your most recent answer, I take it you don't need the footer to be full width (only sticky, though yours isn't) and also I presume you know that your version will only work if you know the height of the "foo - not so important content", as you need the that height to set the top co-ordinate for the sidebar .

You version falls down in that when you narrow the window content disappears off the sides.. but based on the thinking behind it - I've used your logic extended it and built in the sticky footer, top menu - everything that was in the original example link.

the footer's not full width, but you can make it look like it is by putting a background image on the html element, I have a plain dummy image in my fiddle but it's not showing up, anyway you would make an image the same height/color as the footer with the 1px border built in

this absolutely relies on you being able to fix/calculate the height of everything above the pink/blue columns

there is a lot less container divs needed for this and the content is now before the sidebar in the source

Here's the fiddle : fullsize : to edit

0 讨论(0)
发布评论:

提交评论
- 加载中...
挽巷

2020-12-19 23:39
I see this as a design having a top a middle and a footer. The middle section contains both the pink and blue columns.
1. Using CSS, place a repeating image in the background of the middle-section behind both the left and right columns. This image would show the edges of both columns. Hopefully your design will accommodate this. I admit I do not know, without really digging into the code, how to make the middle expand all the way down to the bottom. I should think there are some different ways to approach this.
2. Use css overflow: auto; for your pink column; for the blue, set overflow: auto; on the or tag.
3. I hope this helps...
0 讨论(0)
发布评论:

提交评论
- 加载中...

长发绾君心

2020-12-19 23:46

There were many issues, so I rewrote it. I have created exactly what you want. Enjoy. =)

http://jsfiddle.net/hRkx8/53/

The trick is to have your main region have a margin-bottom the same height as your footer (which you absolutely position). Thus as your blue thing gets larger, it will start pushing the bottom of the page a bit earlier than it normally would.

(edit: this version moves the footer, which is more difficult to do; however the question asked that the blue area be initialized to be as large as possible, see below for one way to do this)

Here we go! Unfortunately I have to include it inline, since jsfiddle has some severe bugs that prevent proper display. This version has the blue area start all the way at the bottom.

absolutely-positioned elements seem to have some trouble automatically scrolling as the page gets bigger, so I created a dummy #main div much like you did and had it fill the entire viewport, then inside that is both the #footer and #content (your blue and red stuff). The #footer is absolutely positioned so it takes up no space / the document doesn't care about it. As the #content expands, the #main container expands with it, dragging the footer along. The use of a margin-bottom is necessary to prevent the footer from hiding text.

The actual amount of CSS required to do this is, if you remove the demo stuff, just about 5 lines and dummy element.

<html>
<head>

<style>

body {
    margin:0; padding:0;
}

* { /* just for demonstration */
    box-sizing:border-box;
    padding:5px;
    border:1px dashed red;
    -webkit-border-radius:10px; -moz-border-radius:10px;
    background-color:hsla(0,50%,50%, 0.1);
}

/*important to use min-height not height*/

#main {
    position:relative; width:100%; min-height:100%;
    border:3px solid green;
}
#footer {
    position:absolute;
    left:0px; right:0px; bottom:0px; height:5em; /*can be anything*/
    background-color:lightgrey;
}

#content {
    position:relative;
    box-sizing:border-box;
    background-color:skyblue;
    margin-left:auto; margin-right:auto;
    padding-bottom:5em; /*must be same as #footer's height*/
    margin-top:10%; /*browser bug: actually acts like 20%*/
    width:50%;
    min-height:80%; /*should equal 100%-marginTop*/
    border:3px solid blue;
}
/* dependent elements */
#sidebar {
    position:absolute;
    top:0px; bottom:0px;
    right:100%; width:7em;
    background-color:pink;
overflow-y:scroll;
}
#topbar {
    position:absolute;
    bottom:100%; height:3em;
    right:-10%; left:10%;    
}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>

setTimeout("$('pre').animate({height:1500}, 3000)", 1000);  

</script>

</head>
<body>

<div id="everything">
    <div id="main">

        <div id="content">
            <div id="sidebar">
                alpha
                <br/>
                beta
                <br/>
                gamma
                <br/>
                etc.
            </div>
            <div id="topbar">
                Menu1 * Menu2 * Menu3 * ...
            </div>
            This is my site.
            Yay.
            <pre>
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            </pre>
        </div>

        <div id="footer">
            footer
        </div>
    </div>
</div>

</body>
</html>

0 讨论(0)

轻奢々

2020-12-19 23:47
Is it just me, or is the pink elephant in the room sitting on a ...

< T A B L E >

???

Update (April 20th, 11:40AM): Here's the <table> version:

http://juliusdavies.ca/stackoverflow/pink_elephant.html

Be sure to resize your browser window a few times to see it in action.
- IE8 - perfect
- Chrome - perfect
- Safari - no scrollbar, otherwise okay
- Firefox - no scrollbar, otherwise okay
0 讨论(0)
发布评论:

提交评论
- 加载中...

How to create a table-like CSS layout with DIVs?

UPDATE 2

Here's the fiddle : fullsize : to edit