0

请帮助我进行这种响应式设计。

这是我的 HTML 布局：

<body>
    <div id="container">
        <div id="wrapper">
            <div id="images">
                <div id="cats">
                    <img src="cat-image-1.png" />
                    <img src="cat-image-2.png" />
                </div>
                <div id="dogs" style="display: none;">
                    <img src="dog-image-1.png" />
                    <img src="dog-image-2.png" />
                </div>
            </div>
            <div id="chat_wrapper">
                <div id="chat_messages">
                    Chat messages in here
                </div>
                <div id="chat_input">
                    <input type="text" value="Type to chat" />
                </div>
            </div>
        </div>
    </div>
</body>

现在让我解释一下 CSS 应该做什么：

#wrapper 中有一个 div #images 和一个 div #chat_wrapper。

#images 中的 div #cats 和 #dogs 中包含未知数量的图像（= 高度未知）。

#chat_wrapper 应始终尝试填满整个屏幕，但如果 div #cats 或 #dogs 可见，则 #chat_wrapper 应折叠以避免文档元素的高度大于窗口高度。（最小高度应至少为 400 像素，因此如果 #dogs 填充 100% 的窗口高度，您应该能够向下滚动到聊天。

我不知道是否可以仅使用 CSS，您能帮忙吗？:)

非常感谢！

截图#1：

在此处输入图像描述

#dogs 可见，#chat_wrapper 填充剩余空间，您只需滚动 #chat_messages div（#chat_input 不动）

截图#2：

在此处输入图像描述

只是聊天可见，您只需滚动#chat_messages div（#chat_input 不动）

截图#3：

在此处输入图像描述

#dogs 在某些图像中可见，您可以滚动整个窗口，聊天高 400 像素，您可以滚动 #chat_messages div（如果滚动整个窗口，#chat_input 只会移动）

4

1 回答 1

0

我编辑了第三个链接以添加 http://。

#dogs div 可以滚动。
修复 div 的最大高度并使用溢出属性使其可滚动。

如此处所述：Mozilla Developer Network - 溢出属性

div {
宽度：150px；
高度：150px；
溢出：滚动；
}

注意：注意：IE7 和更早版本不支持值“inherit”。IE8 需要一个!DOCTYPE。IE9 支持“继承”。

如果您不想要可滚动的#dogs div，请使用 display: block for img

尝试 ：

img {
    display: block;
}

#chat_input {
    position: fixed;
    background-color: white;
    padding: 5px;
    witdh: 100%;
    bottom: 0px;
}

如果您愿意，还可以修复消息容器的最大高度。

于 2013-07-22T14:47:21.480 回答