HTML (5) Column Troubles with Positioning_问答_开发者

HTML (5) Column Troubles with Positioning

开发者 https://www.devze.com 2023-02-09 02:46 出处：网络

This should be a pretty trivial issue, but it\'s causing me a bit of a headache. I have an html layout, summarized with the relevant code below. Basically I have the <section> and <aside>

相关专题：css

This should be a pretty trivial issue, but it's causing me a bit of a headache.

I have an html layout, summarized with the relevant code below. Basically I have the <section> and <aside> acting as the main content, and the right handed content. I am trying to make sure they will always behave in this manner, regardless of any kind of funky boundaries caused by borders, margins, padding, etc. The solution seemed to be simply setting them to have absolute and relative positioning.

This did achieve my desired result, but I am having trouble with the underlying content. The <article> does not stretch to the right height. Since the height is not always determinable at code-time, giving it a set height is not an option. My intended goal is that the underlying <article> background will stretch to accommodate no matter how high either of the <section> or <aside> panes become. Any ideas?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>

    <style type="text/css">
        .container { margin: 0px auto; width: 960px; position: relative }

        article { 
            overflow: hidden;  
            background-color: Black;  
            height: auto; 
        }

        section { 
            width: 675px; 
            position: relative; 
            left: 0px; 
            o开发者_JS百科verflow: hidden; 
            margin: 10px; 
            height: 300px; 
            background-color: Aqua; 
        }
        aside {  
            width: 260px;  
            position: absolute; 
            right: 0px; 
            top: 0px; 
            overflow: hidden; 
            margin: 10px; 
            height: 500px; 
            background-color: Fuchsia; 
        }
    </style>
</head>
<body>
    <div class="container">
        <article>
            <section>
            </section>
            <aside>
            </aside>
        </article>
    </div>
</body>
</html>

As requested, here is the code with faux columns:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Faux column example</title>
    <meta charset="UTF-8" />
    <style type="text/css">
        html, body {
            height: 100%;
        }
        .container {
            margin-bottom: 2em;
        }
            article { 
                background: #000 url(http://imaginekitty.com/cssExamples/oog.gif) repeat-y; 
                    border: solid 10px #000; 
            display: block;
            margin: 0 auto;
                min-height: 100%; 
            width: 945px;
                    overflow: hidden;  
            }
                section { 
                    display: block;
                    float: left;
                    overflow: hidden; 
                    width: 668px; 
            }
            aside {  
                    float: left;
                    margin-left: 20px; 
                    overflow: hidden; 
                    width: 255px;  
            }
    </style>
</head>
<body>
    <div class="container">
    <p>There is no use of absolute or relative positioning here.</p>
        <article>
            <section>
        <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            </section>
            <aside><p>asdf</p>
            </aside>
        </article>
    </div>
    <div class="container">
        <article>
            <section>
        <p>asdf</p>
            </section>
            <aside><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            </aside>
        </article>
    </div>
</body>
</html>

The reason I mentioned that absolute positioning is, in my opinion, inappropriate in this situation is that it removes elements from the normal document flow which will most likely cause issues with other elements on the page. At best, it's just unnecessary. At worst, you'll pull your hair out trying to figure out problems. :)

A good article on the subject: http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/