Css HTML（5）列定位问题_Css_Html

Css HTML（5）列定位问题

css html

Css HTML（5）列定位问题,css,html,Css,Html,这应该是一个很小的问题，但它让我有点头疼我有一个html布局，下面总结了相关代码。基本上我有和作为主要内容，还有右手内容。我试图确保它们始终以这种方式运行，而不考虑由边框、边距、填充等引起的任何时髦的边界。解决方案似乎只是简单地将它们设置为具有绝对和相对位置这确实达到了我想要的结果，但我在底层内容方面遇到了问题。没有伸展到正确的高度。由于高度在编码时并不总是可确定的，因此不能给它设定一个高度。我的目标是，无论或窗格的高度有多高，底层的背景都将伸展以适应。有什么想法吗 <!DOCTYPE

这应该是一个很小的问题，但它让我有点头疼

我有一个html布局，下面总结了相关代码。基本上我有

和

作为主要内容，还有右手内容。我试图确保它们始终以这种方式运行，而不考虑由边框、边距、填充等引起的任何时髦的边界。解决方案似乎只是简单地将它们设置为具有绝对和相对位置

这确实达到了我想要的结果，但我在底层内容方面遇到了问题。

没有伸展到正确的高度。由于高度在编码时并不总是可确定的，因此不能给它设定一个高度。我的目标是，无论

或

窗格的高度有多高，底层的

背景都将伸展以适应。有什么想法吗

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


.container{margin:0px auto；宽度：960px；位置：relative}
第{
溢出：隐藏；
背景色：黑色；
高度：自动；
}
第{
宽度：675px；
位置：相对位置；
左：0px；
溢出：隐藏；
利润率：10px；
高度：300px；
背景色：浅绿色；
}
旁白{
宽度：260px；
位置：绝对位置；
右：0px；
顶部：0px；
溢出：隐藏；
利润率：10px；
高度：500px；
背景色：紫红色；
}

根据要求，以下是带有假列的代码：

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


人造柱示例
html，正文{
身高：100%；
}
.集装箱{
边缘底部：2米；
}
第{
背景：#000 url(http://imaginekitty.com/cssExamples/oog.gif)重复-y；
边框：实心10px#000；
显示：块；
保证金：0自动；
最小高度：100%；
宽度：945px；
溢出：隐藏；
}
第{
显示：块；
浮动：左；
溢出：隐藏；
宽度：668px；
}
旁白{
浮动：左；
左边距：20px；
溢出：隐藏；
宽度：255px；
}
这里没有绝对或相对定位的用途
正如我们所看到的，文章是一个内联元素，所以它需要占用多少空间就占用多少空间。您可以将其更改为块元素，但我不确定它是否会破坏其他内容我已尝试添加display:block添加到它，但它无法解决问题。文章仍然拒绝拉伸。请尝试将
设置为显示：块或显示：内联块。我不认为绝对定位是你认为的万能药。对于放置主要布局元素来说，它不是很好。在您的情况下，我认为它充其量是不必要的。@Fender，是一个块级元素，因为它可能包含。你必须在html5元素上指定display
，才能让它们在大多数浏览器中工作。+1是的，这是造成问题的绝对定位。我正试图采取一种方法，在实现相同结果的同时，需要最少的标记和css。我已经了解到，虽然我可以分别设计每件事，但如果我这样做，它就会变成一个整体。我觉得绝对定位可以通过添加“filler”
和
标记来减少我在某些布局上的迂回方式。显然，如果它只是增加了更多问题，那么这不是正确的方法。谢谢你的帮助，这足以满足我的特殊需要。我的主要问题是宽度，并在不将一列踢到下一行的情况下尽可能保持两列的宽度-但是当您开始使用带有填充
、边距
、和边框的元素时，开始难以管理这些维度。