Question

我正在尝试构建一个可以全屏运行的页面，但它会缩小div的下降并适合内容并允许滚动。在全屏我想要一个大盒子，底部有三个小盒子。大框中的内容会动态变化，因此div需要能够在较低分辨率的设备上进行缩放。此外，在较低分辨率的设备上，我希望底部的三个盒子堆叠在一起，并且都是固定的宽度以适合它们的所有内容。我的主要问题是文本溢出大框并且在较小的屏幕上无法读取。

这是HTML：

    <body>
    <div class="container">
        <div class="content">
        </div>
    </div>
    <div class="footer">
        <div class="widget1">
            <div class="widget_contents">
            </div>
        </div>
        <div class="widget2">
            <div class="widget_contents">
            </div>
        </div>
        <div class="widget3">
            <div class="widget_contents">
            </div>
        </div>
    </div>
    </body>

这是CSS：

*{box-sizing: border-box;}
html{height: 100%;}
body{height: 100%;}

.container {
    height: 80%;
    width: 100%;
    padding: 1em;
}

.content {
    height: 100%;
    width: 100%;
    background: rgba(150, 50, 50, 1);
}

.footer {
    height: 20%;
    width: 100%;
    padding-right: 1em;
}

.widget1 {
    width: 55%;
    height: 100%;
    padding-left: 1em;
    float: left;
}

.widget2 {
    width: 25%;
    height: 100%;
    padding-left: 1em;
    float: left;
}

.widget3 {
    width: 20%;
    height: 100%;
    padding-left: 1em;
    float: left;
}

.widget_contents {
    height: 100%;
    background: rgba(55, 150, 55, 1);
}

这是我的基本布局的jdfiddles：http://jsfiddle.net/kzoqwz9n/

谢谢！

Answer 1

对于允许滚动，您只需要应用'overflow：auto;'你的街区。

对于堆栈底部块，您需要使用媒体查询，例如：

@media screen and (max-width: 600px)
{
    .widget1,.widget2,.widget3 {
        padding-left: 1em;
        float:none;
        width: auto;
    }
}

当屏幕小于600px时，此示例将堆叠您的框。

更新：

对于滚动内容，我们需要应用一些更改：

.container {
    min-height: 80%;
    margin: 1em 1em 0 1em;
    background: rgba(150, 50, 50, 1);
}

我们删除.content的样式并添加'padding-top：1em;'到.footer

例如：http://jsfiddle.net/kzoqwz9n/3/

这是你想要做的？（尝试添加/删除内容）

Answer 2

您基本上需要media queries根据视口大小和可能的设备方向应用不同的规则，并flexboxes用于在行和列布局之间切换

我的主要问题是文字溢出大框，在较小的屏幕上无法读取。

将宽度设置为width: fit-content;（+供应商前缀）以允许框本身而不仅仅是文本内容溢出父容器

将Divs扩展为内容

2 个答案: