Question

tl; dr - 如何将第三张图片中找到的蓝色div置于空白处，而不是页面？

我最近一直在经历头痛。我创建了一个包含两个不同列的网站，但只使用了一个div元素。这可以在下面看到。

Two columns on the page.

从图片中可以看出，第一列被视为侧边栏，因此具有类.sidebar。 .sidebar具有width的固定400px属性。页面的其余部分只是div的其余部分.container，其100%和width都延伸到height 属性。正如我想象的那样，仅仅通过阅读本文就难以想象，我找到了一种方式来说明页面的设置方式。

Setup Image

Gray是html元素。
白色是body元素。
白色的浅绿色是div，类.container。
以下aqua是div，其中包含.sidebar类。

现在让div插入给我的问题。

New Div

如您所见，添加了一个蓝色div。这包含类.test，只需设置width，height和margin属性。正如您现在所看到的，当margin设置为0 auto时，div将以窗口为中心而不是空白区域。显然这是预期的行动。

我面临的问题是，我不知道如何将蓝色div置于空白处。我不确定如何创建白色空间的确切宽度，因此，不知道margin: 0 auto将如何使用。我如何将我的测试元素放在白色空间中？这可以通过CSS和HTML来实现吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome.</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300|Raleway' rel='stylesheet' type='text/css'>
<link href="https://www.codekaufman.com/assets/css/core.css" rel="stylesheet" type="text/css" />
<link href="https://www.codekaufman.com/assets/css/alerts.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="banner-alert">Please excuse the mess. I'm currently working to improve the site. Thanks.
    </div>
    <div class="container">
        <div class="side-bar">
            <div class="temp-logo"></div>
            <ul class="nav">
                <li class="nav-button-disabled">About</li>
                <li class="nav-button-disabled">GitHub</li>
                <li class="nav-button-disabled">Contact</li>
            </ul>

            <a href="https://www.codekaufman.com/support/"><div class="emphasis-button-disabled">Support</div></a>
            <div class="legal">Copyright &copy; 2015 Jeffrey Kaufman. All Rights Reserved.</div>
        </div>

        <div class="test"></div>

    </div>
</body>
</html>

@charset "utf-8";
* {
    margin: 0;
    padding: 0;
    font-family: "Raleway", sans-serif;
    color: #000;
}

html, body {
    width: 100%;
    height: 100%;
}

a {
    text-decoration: none;
    color: inherit;
}

.container {
    height: 100%;
}

.side-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 400px;
    height: 100%;
    background: #EEE;
}

.temp-logo {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    margin-top: 150px;
    background: #000;
}

.nav {
    width: 200px;
    margin: 0 auto;
    margin-top: 75px;
    list-style-type: none;
}

.nav-button {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 1.6em;
    cursor: pointer;
    transition: 0.5s;
}

.nav-button:hover {
    margin-left: 20px;  
}

.nav-button-disabled {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 1.6em;
    cursor: default;
    color: #AAA;
}

.nav-category {
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 2em;
    cursor: default;
    border-bottom: 1px #000 solid;
}

.emphasis-button {
    text-align: center;
    position: absolute;
    width: 120px;
    height: 45px;
    left: 138px;
    line-height: 45px;
    bottom: 70px;
    border-radius: 5px;
    border: 1px solid #C30;
    color: #C30;
    transition: 0.4s;
    cursor: pointer;
}

.emphasis-button-enabled {
    text-align: center;
    position: absolute;
    width: 120px;
    height: 45px;
    left: 138px;
    line-height: 45px;
    bottom: 70px;
    border-radius: 5px;
    border: 1px solid #C30;
    transition: 0.4s;
    cursor: pointer;
    color: #EEE;
    background: #C30;   
}

.emphasis-button-disabled {
    text-align: center;
    position: absolute;
    width: 120px;
    height: 45px;
    line-height: 45px;
    left: 138px;
    bottom: 70px;
    border-radius: 5px;
    border: 1px solid #AAA;
    color: #AAA;
    cursor: default;
}


.emphasis-button:hover {
    color: #EEE;
    background: #C30;   
}

.legal {
    font-family: 'Open Sans', sans-serif;
    position: absolute;
    font-size: 0.85em;
    text-align: center; 
    width: 400px;
    height: 20px;
    left: 0;
    bottom: 20px;
}

.test {
    width: 600px;
    height: 200%;
    background: blue;
    margin: 0 auto;
}

Answer 1

将其包含在position=absolute，right，top和bottom值0以及left值{的另一个元素中{1}}：

400px

Answer 2

您的侧栏已经固定了位置，所以请在您的容器中添加填充物，它将起作用

.container {
   height: 100%;
   padding-left: 400px; /*width of your .sidebar*/
}

Answer 3

尝试更改百分比的宽度并添加一个覆盖剩余空白区域的新div，以便将蓝色元素置于该新div的中心。

.side-bar {
position: fixed;
top: 0;
left: 0;
width: 20%;
height: 100%;
background: #EEE;

}

.new-div{width:80%;float:left;}

在新div中设置测试

<div class="new-div"><div class="test"></div></div>

使用补充工具栏对文档中的内容进行问题

3 个答案: