将 Div 缩放到内容

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

你基本上需要media queries to apply different rules depending on the viewport size and possibly device orientation and flexboxes来切换行列布局

My main issue is text spilling out of the big box and being unreadable on smaller screens.

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

Answer 2

要允许滚动，您只需将 '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/

这是你想做的吗？（尝试add/remove内容）

将 Div 缩放到内容

Scales Divs to content

html

css

responsive-design