Question

这应该是一个非常微不足道的问题，但它让我有点头疼。

我有一个html布局，总结了下面的相关代码。基本上我有<section>和<aside>作为主要内容和右手内容。我试图确保他们总是以这种方式行事，不管由边框，边距，填充等引起的任何类型的时髦边界。解决方案似乎只是将它们设置为具有绝对和相对定位。

这确实达到了我想要的结果，但我遇到了底层内容的问题。 <article>没有伸展到正确的高度。由于高度并不总是在代码时确定，因此不能选择设定高度。我的目标是，无论<article>或<section>窗格中的任何一个窗格变得多高，基础<aside>背景都会延伸到适应范围。有什么想法吗？

<!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; 
            overflow: 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>

Answer 1

根据要求，这是带有虚拟列的代码：

<!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>

我提到绝对定位的原因在我看来，在这种情况下不合适的是它从正常文档流中删除元素，这很可能会导致页面上其他元素出现问题。充其量，这是不必要的。在最坏的情况下，你会拔出头发试图找出问题。 :)

关于这个主题的好文章：http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/

HTML（5）列定位故障

1 个答案: