我有点脑残。我有一个主 div,它几乎就是主体(不要问我为什么,我已经绝望了),在那个 div 中是一个 head div,在那个 div 中是导航栏。这是一个清晰的层次结构。问题是,每当我尝试使用百分比来调整导航栏或 head div 的高度和宽度时,什么都没有发生。 zip ,零,虚无。我试过将位置更改为绝对位置、相对位置,甚至是静态位置。我删除了 Master Div,重新排序了层次结构,但似乎没有任何效果。最终我明白了,当我使用像素时,我得到了想要的改变。 (显然必须做一些转换)。我的第一个想法是层次结构,但再一次,它很清楚,没有丢失结束标签,没有奇怪的 parent 或 child 。 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 在那里,因为它似乎并没有真正发挥作用。
随时批评我的编码风格,仍在学习中!
最佳答案
你可能想试试
min-height: 100%;
min-width: 100%;
position: absolute;
关于html - CSS 只能使用像素样式元素,而不是百分比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17002917/