0

我有一点大脑融化的问题。我有一个主 div，这几乎就是身体（不要问我为什么，我越来越绝望），在那个 div 里面是一个 head div，在那个 div 里面是导航栏。这是一个清晰的层次结构。问题是，每当我尝试使用百分比来调整导航栏或头部 div 的高度和宽度时，什么都没有发生。邮编，零，纳达。我尝试将位置更改为绝对、相对甚至静态。我已经删除了 Master Div，我重新排序了层次结构，但似乎没有任何效果。最终我发现当我使用像素时，我得到了想要的改变。（显然必须做一些转换）。我的第一个想法是等级制度，但同样，它很清楚，没有丢失的结束标签，没有奇怪的父母或孩子。HTML

<div id="master_div">
    <div id="head_div">
    <div id="title_div">
      <p id="title">A Challenging Sew</p>
      <p id="subtitle">A sewing room, Venti Starbucks and a iPod classic....with a weekly Monday update to keep me on task....lets see what happens....</p>
    </div>
    <div id="nav_bar">
      <ul>
        <li><a class="nav_bar_links" href="/home">Home</a></li>
        <li><a class="nav_bar_links" href="/about">About</a></li>
        <li><a class="nav_bar_links" href="/projects/2013">Projects for 2013/2014</a></li>
        <li><a class="nav_bar_links" href="http://www.flickr.com/photos/91959855@N02/collections/72157632507621761/">Completed</a></li>
        <li><a class="nav_bar_links" href="/archive">Archives</a></li>
        <li><a class="nav_bar_links" href="/subscribe">Subscribe</a></li>
        <li><a class="nav_bar_links" id="sign_in" href="#">Sign In</a></li>
      </ul>
    </div>
</div>
</div>

CSS

body
{
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 15px;
    padding:0 !important;
}

#master_div
{
    position:relative;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

/* Navigation Page */
#scary_tree
{
    position:absolute;
    right:40%;
    top:25%;
}

/* Home */
/* TODO: Make Responsive Home Page */
#head_div
{
    background-color:whitesmoke;
    position:absolute;
    height:63px;
    width:100%;
    margin:0;
    padding:0;
}
/*  A Challenging Sew + A sewing room, Venti Starbucks and a iPod classic..*/
#title_div
{
    background-color:white;
    opacity: .7;
    position:relative;
    height:30px;
    width:100%;
    top:15px;
    border-top: solid 1px #e7e7e7;
    border-bottom: solid 1px #e7e7e7;
}

#title
{
    position:absolute;
    left:3%;
    top:-9%;
    font-size:100%;
    margin:0;
    padding:0;
}

#subtitle
{
    position:absolute;
    left:3%;
    top:50%;
    padding:0;
    margin:0;
    font-size:40%;
    line-height: 1.2;
}

#nav_bar
{
    position:absolute;
    top:100%;
    height:15%;
    width:100%;
    background-color:whitesmoke;
    border-top: solid 1px #e7e7e7;
    border-bottom: solid 1px #e7e7e7;
    margin:0;
    padding:0;
}

#nav_bar ul {
    margin:0;
    padding:0;
    position:relative;
    height:20px;
    top:-8px;
}

#nav_bar li {
    display:inline;
}

#nav_bar a:link,a:visited {
    margin:0;
    padding-left:5px;
    text-decoration: none;
    color: black;
    font-size:50%;
}

#nav_bar #sign_in
{
    position:absolute;
    right:2%;
    top:3px;
    margin:0;
    padding:0;
}

注意：我正在使用重置文件。但是，我仍然有 margin 和 padding :0 在那里，因为它似乎并没有真正占据主导地位。

随意批评我的编码风格，还在学习！

4

2 回答 2

0

你可能想试试

min-height: 100%;
min-width: 100%;
position: absolute;
于 2013-06-08T19:19:05.173 回答
0

找到原因，将我的主 div 的位置设置为相对是问题所在。不知道为什么，但是嘿。现在可以了。有点。

于 2013-06-09T03:31:53.133 回答