Question

我的设计使用了一些引导样式，右边有一个白色的列。高度应为100％，但不是100％渲染。它呈现在初始屏幕高度的100％，但是当你向下滚动时，它不再是白色。

我已经在这个网站上看了几个其他的CSS解决方案。我试过让所有父元素都达到100％的高度。我试过把它变成一个flexbox专栏。我试过把位置：相对;＆＃34;在身体里。什么都没有奏效。我不想用JS来实现这个目标。

我的HTML的简化版本：

<body>

<div class="container">
    <div class="main">

        <h1>This is the main content area</h1>
    </div>
    <div class="right pull-right">
        <div class="content">   
        </div>

        <div class="content">   
        </div>

        <div class="content">   
        </div>

        <div class="content">   
        </div>
    </div>

</div>
</body>

CSS：

body,html {
    height: 100%;
    background-color: #aaa;
}
body {
    position: relative;
}
.main  {
        display: inline-block;
}

.container {
    height: 100%;
}
.right {
        display: inline-flex;
        flex-direction: column;
        background-color: #fff;
        width: 350px;
        height: 100%;  
        min-height: 100%;
        border: 1px solid #E1E6E9;      
        margin-right: 100px;
        position: absolute;
        right: 100px;
}
.content {
    height: 300px;
    min-height: 300px;
    margin: 10px 10px;
    background-color: #ccc;
    border: 1px solid #000;
}

Answer 1

将.right类更改为height：auto; 它的大小将适合其内容。

.right {
        display: inline-flex;
        flex-direction: column;
        background-color: #fff;
        width: 350px;
        height: auto;  
        min-height: 100%;
        border: 1px solid #E1E6E9;      
        margin-right: 100px;
        position: absolute;
        right: 100px;
}

[*]

在绝对定位的列上设置100％高度

1 个答案: