Question

我觉得我已经尝试了最小高度的每个组合：100％，高度：100％，高度：自动！重要等等。我有一个包裹我的整个身体代码，以及内部的导航身体代码（但在'main'之外）应该沿着侧面垂直运行。

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>

Answer 1

我过去也遇到过这个问题。使用HTML＆amp; CSS一切都会占用100％的宽度，因为这是定义的。高度可以是任何东西。所以我们必须定义它。我换了几件事：

体{ 身高：1000px＆lt; - 我设置了这个，所以它知道它有多大，里面的一切都有100％意味着的参考点。 }

主{ 我删除了填充底部和顶部以使其均匀。如果您尝试将文本推向中心，则有更好的方法可以实现此目的。 }

NAV { 高度：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>

为什么我的侧导航不会延长身体/包装的长度？

1 个答案: