Question

我有一个小问题。我正在处理的网页有三个方面：

左侧是导航，应始终位于左侧
中间的内容区域，应该始终位于浏览器的中间
右侧的徽标区域，应始终位于右上角

这是我现在的代码：

CSS

html, body
    {
        height: 100%;
        min-height:100%;
        padding: 0em;
        margin: 0em;
    }

body 
{
    font-family: Segoe UI, Arial;
    font-size: 12px;
    color: #616a71;
    line-height: 15px;
    letter-spacing: 0.5px;
    overflow-y: scroll;
    background-color: #CCC;
}

div#navigation
{
    position: absolute;
    float: left;
    width: 220px;
    left: 5px;
    top: 70px;
    z-index: 2;
    padding-bottom: 50px;
    background-color: red;
}

div#content
{
    position: relative;
    width: 1014px;
    margin: 0 auto;
    top: 70px;
    padding: 10px;
    background-color: #f6f6f3;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    border-radius: 2px;
    line-height: 20px;
}

div#right
{
    position: absolute;
    width: 258px;
    right: 0;
    top: 0;
    background-color: green;
}

HTML

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <title>header</title>
    <link href="/style/test.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
    <div id="navigation">
        nav
    </div>
    <div id="content">
        content
    </div>
    <div id="right">
        logo
    </div>
</body>
</html>

现在，当我调整浏览器大小时，内容区域会在导航后面。我想要实现的是，当空间太小而无法并排显示导航和内容区域时，应该会出现浏览器的水平滚动条。

Answer 1

使用CSS媒体查询，如下所示：

@media (max-width: 600px) {
 // Your code goes here
}

您可以指定要用于这些宽度的CSS。相应地改变宽度

Answer 2

尝试将div的宽度设为％。

div#navigation
{
    width: 20%;
}

div#content
{
    width: 60%;
}

div#right
{
    width: 20%;
}

并将它们全部向左浮动。

分区不应重叠

2 个答案: