Question

请帮我解决这个响应式设计。

这是我的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应该折叠以避免文档元素的高度大于窗口高度。（最小高度应该至少为400px，所以如果让#dogs填充100％的窗口高度，你应该能够向下滚动到聊天。

我不知道是否可以使用CSS，你能帮忙吗？：）

非常感谢！

屏幕截图＃1：

enter image description here

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

屏幕截图＃2：

enter image description here

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

屏幕截图＃3：

enter image description here

#dogs可见一些图像，你可以滚动整个窗口，聊天是400px高，你可以滚动#chat_messages div（如果你滚动整个窗口，＃chat_input只会移动）

Answer 1

我编辑了第3个链接以添加http：//。

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

<小时/> 如下所述：Mozilla Developer Network - overflow property

div {
  宽度：150像素;
  高度：150像素;
  溢出：滚动;
  }

注意：注意：值＆＃34;继承＆＃34; IE7及更早版本不支持。 IE8需要一个！DOCTYPE。 IE9支持＆＃34;继承＆＃34;。

如果你不想要一个可滚动的#dogs div，那么使用display：block for img

<小时/> 试试：

img {
    display: block;
}

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

如果需要，请修复邮件容器的最大高度。

HTML + CSS：我如何实现预期的行为（没有JS！）

1 个答案: