为什么我的侧面导航仪不能延长机身/包裹器的长度？
[英]Why won't my side nav extend the length of the body/wrapper?
问题描述
我感觉我已经尝试过最小高度：100％，高度：100％，高度：auto！important等的每种组合。我有一个包装器，用于包装我的整个身体代码，以及在身体代码中的导航（但在“主要”之外）应该沿侧面垂直延伸。
body { background-color: #f8f8f8; width: 90%; margin: auto; height: 100%; } main { width: 75%; height: 100%; background-color: rgba(4, 78, 28, .5); padding-top: 30px; padding-bottom: 30px; padding-left: 5%; padding-right: 5%; float:right; background-color: blue; } #content { height: 100%; background-color: red; } #wrapper { margin: auto; width: 90%; height: 100%; background-color: white; box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75); background-color: green; } nav { float: left; width: 15%; height: 100%; background-color: #a40204; margin-top: 0; }
<div id="wrapper"> <body> <header> <img src="images/banner.jpg"/> </header> <hr id="hr"> <nav> <!-- JQUERY/JAVASCRIPT MENU FROM GOOTEACH--> <ul class="goo-collapsible goo-coll-stacked"> <li><a href='#'> Home</a></li> <li class='dropdown'><a class='' href='#'>About</a> <ul> <li ><a href='#'>Who is Jim?</a></li> <li ><a href='#'>The history of the bagpipes</a></li> </ul> </li> <li><a href='#'> Gallery</a></li> <li><a href='#'> Contact</a></li> </ul> </nav> <main> <div id="content"> <img src="images/indexmain.jpg" alt="Bagpiper on a hill" width="40%"/> <h1>Bagpipes for parties, corporate events, weddings, and more!</h1> <p> A BUNCH OF TEXT HERE </p> <h2>The Sounds of Scotland</h2> <p>Jim Miller has played for weddings, parades, parties, and funerals. Listen to two popular bagpiping songs, The Conundrum and Green Monster. <h3>Listen to: The Conundrum</h3> <audio controls="controls" title="Listen to: The Conundrum March"> <source src="conundrum.mp3" type="audio/mpeg"> <source src="conundrum.ogg" type="audio/ogg"> <a href="conundrum.mp3">Download The Conundrum March</a> (MP3) </audio> <br/> <h3>Listen to: Green Monster</h3> <audio controls="controls" title="Listen to: Green Monster"> <source src="greenmonster.mp3" type="audio/mpeg"> <source src="greenmonster.ogg" type="audio/ogg"> <a href="greenmonster.mp3">Download Green Monster</a> (MP3) </audio> </div> </main> <div class="clear"> </div>
1 个解决方案
解决方案1
0 2015-12-15 21:02:15
我过去也遇到过这个问题。 使用HTML和CSS，所有内容都会占用100％的宽度，因为已定义。 高度可以是任何东西。 因此，我们必须对此进行定义。 我改变了几件事：
body {height：1000px <-我设置了它，因此它知道要多大，并且其中的所有内容的参考点均为100％。 }
main {我删除了底部和顶部的填充以使其均匀。 如果您尝试将文本推向中心，则可以使用更好的方法。 }
导航{height：100％我将其设置为100％以使其与主体底部匹配。 }
对于浏览器，高度基本上是无限的。 什么是无限的100％？ 因此，它仅允许div只占用内容周围的空间。
我希望这就是你要的。 如果不是或需要其他东西，请告诉我。 :)
我对代码形式的更改：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
background-color: #f8f8f8;
width: 90%;
margin: auto;
height: 1000px;
}
main {
width: 75%;
height: 100%;
background-color: rgba(4, 78, 28, .5);
padding-left: 5%;
padding-right: 5%;
float:right;
background-color: blue;
}
#content {
height: 100%;
background-color: red;
}
#wrapper {
margin: auto;
width: 90%;
height: 100%;
background-color: white;
box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
background-color: green;
}
nav {
float: left;
width: 15%;
height: 100%;
background-color: #a40204;
margin-top: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<img src="images/banner.jpg"/>
</header>
<hr id="hr">
<nav>
<!-- JQUERY/JAVASCRIPT MENU FROM GOOTEACH-->
<ul class="goo-collapsible goo-coll-stacked">
<li><a href='#'> Home</a></li>
<li class='dropdown'><a class='' href='#'>About</a>
<ul>
<li ><a href='#'>Who is Jim?</a></li>
<li ><a href='#'>The history of the bagpipes</a></li>
</ul>
</li>
<li><a href='#'> Gallery</a></li>
<li><a href='#'> Contact</a></li>
</ul>
</nav>
<main>
<div id="content">
<img src="images/indexmain.jpg" alt="Bagpiper on a hill" width="40%"/>
<h1>Bagpipes for parties, corporate events, weddings, and more!</h1>
<p>
A BUNCH OF TEXT HERE
</p>
<h2>The Sounds of Scotland</h2>
<p>Jim Miller has played for weddings, parades, parties, and funerals. Listen to two popular
bagpiping songs, The Conundrum and Green Monster.
<h3>Listen to: The Conundrum</h3>
<audio controls="controls" title="Listen to: The Conundrum March">
<source src="conundrum.mp3" type="audio/mpeg">
<source src="conundrum.ogg" type="audio/ogg">
<a href="conundrum.mp3">Download The Conundrum March</a> (MP3)
</audio>
<br/>
<h3>Listen to: Green Monster</h3>
<audio controls="controls" title="Listen to: Green Monster">
<source src="greenmonster.mp3" type="audio/mpeg">
<source src="greenmonster.ogg" type="audio/ogg">
<a href="greenmonster.mp3">Download Green Monster</a> (MP3)
</audio>
</div>
</main>
<div class="clear">
</div>
</body>
</html>
为什么我的侧导航在关闭时不能顺利过渡？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.