Question

我正在尝试使用标题，导航，左侧边栏，右侧边栏和内容对博客页面进行编码。所有这些部分都是包含在外部div中的子div。但是，并不是所有父div的属性都被识别出来了，bgSide出现在包装器的上方而不是在它下面，我不能为我的生活找出原因。

我没有任何花车，我已经通过一个程序运行我的代码，以确保标记没有任何问题。 overflow: hidden什么也没做。

UPDATE ONE：已解决的宽度属性未继承。仍然需要解决方案，包装纸高度不起作用，左右对齐身体而不是包装，图像显示在顶部而不是后面。

更新二：将height: 100%;更改为height: 100vh;

，解决了身高属性不起作用

<!DOCTYPE html>
<head>
<style>
body
{
    background:{color:background};
    background-repeat: no-repeat;
    background-position: center top;
    background-image: url('{image:background}');
    margin: 0px;
    padding: 0px;
    word-wrap: break-word;
}

#bgside img
{
    position: fixed;
    z-index: 1;
    margin-left: 0px;
    margin-bottom: 0px;
    height: 100%;
    padding: 0px;
}

#wrapper
{
    z-index: 2;
    height: 100%;
    min-height: 300px;
    width: 60%;
    min-width: 600px;
    max-width: 900px;
    margin: 0px auto; /* center the body */
    padding: 0px;

    border: 1px solid {color:side link border};
    border-top: 0px;
    border-bottom: 0px;

    text-align: center;
    background: {color:background};

    -moz-box-shadow: 0px 0px 20px 20px #000
    -webkit-box-shadow: 0px 0px 20px 20px #000;
    box-shadow: 0px 0px 20px 20px #000;
}

#header
{
    background: {color:header background};
    position: fixed;
    z-index: 3;
    top: 0px;
    width: 60%;
    min-width: 600px;
    max-width: 900px;
    height: 100px;
    padding: 0px;
    border: 1px solid {color:side link border};
    border-width: 0px 1px;
    text-align: center;
    vertical-align: center;
}

#header img
{
    background: transparent;
    width: 100%;
    min-width: 600px;
    max-width: 900px;
    height: 100px;
    min-height: 100px;
    max-height: 100px;
}

#nav
{
    background: {color:navigation background};
    position: fixed;
    z-index: 4;
    top: 100px;
    width: 60%;
    min-width: 600px;
    max-width: 900px;
    height: auto;
    padding: 10px 0px 15px 0px;
    border: 1px solid {color:side link border}; 

    text-align:center;
    line-height:5px;

    -moz-box-shadow: 0px 0px 10px 0px #000;
    -webkit-box-shadow: 0px 0px 10px 0px #000;
    box-shadow: 0px 0px 10px 0px #000;
}

#nav a
{
    background: {color:top link bg};
    padding: 2px 15px 3px 15px;
    margin: 4px;

    font-family: calibri;
    font-size: 11px;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    color: {color:top link text};

    -webkit-transition: all 0.5s ease-in-out;
}

#nav a:hover
{
    color:{color:top link text hover};
    background:{color:top link bg hover};
    -webkit-transition: all 0.5s ease-in-out;
}

#right
{
    background: {color:sidebar background};
    position: fixed;
    z-index: 3;
    top: 135px;
    right: 0px;

    height: 100%;
    width: 10%;
    min-width: 150px;
    text-align: center;

    -moz-box-shadow: 0px 0px 10px 0px #000;
    -webkit-box-shadow: 0px 0px 10px 0px #000;
    box-shadow: 0px 0px 10px 0px #000;
}

#left
{
    background: {color:sidebar background};
    position: fixed;
    z-index: 3;
    top: 135px;
    left: 0px;

    height: 100%;
    width: 10%;
    min-width: 150px;
    text-align: center;

    -moz-box-shadow: 0px 0px 10px 0px #000;
    -webkit-box-shadow: 0px 0px 10px 0px #000;
    box-shadow: 0px 0px 10px 0px #000;
}

#content
{
    /* Not coded yet */
}

</style>
</head>

<body>

<div id="bgside"><img src="{image:bgside}" alt="bgSide"/></div>

    <!-- START OF CONTAINER -->
    <div id="wrapper">

        <div id= "header"><img src="{image:header}" alt="header"/></div>

        <div id= "nav">
            A BUNCH OF LINKS
        </div>

        <div id="left">
            CONTENT
        </div>

        <div id="right">
            CONTENT            
        </div>

        <div id="content">
            CONTENT
        </div>

    </div>
    <!-- END OF CONTAINER -->

</body>

</html>

Answer 1

尝试将继承添加到不会级联的包装内的内容中。有些程序会为您执行此操作。例如：

height:inherit;
background:inherit;
color:inherit;

这可能需要一段时间，但它对我有用！

Answer 2

<强>解：

宽度属性未继承：

将width和#nav的{{1}}属性更改为#header

包装器中无法识别高度属性：

在包装器CSS中，将width: inherit;更改为height: 100%;

左右忽略包装并与身体对齐：

删除此代码：

height: 100vh;

并替换为position: fixed; z-index: 3; top: 135px; right: 0px;，并在分配左侧而不是右侧时对float: right;执行相同操作。然后将#left添加到overflow: hidden;

bgside忽略z-index并在顶部分层：

将#wrapper更改为z-index: 0;

子div不识别父div的所有属性，不与父对齐

2 个答案: