Question

当屏幕大小大于768px时，我有这种布局：

但即使调整屏幕大小，我也希望垂直导航栏高度达到页脚。这就是我想要的：

背景颜色明显。

这是html文件和css文件！

article {
	text-align: left;
}

header {
	background: black; 
	color: white;
	padding: 10px;
	text-align: center;
}

nav {
	background: #eee;
	padding: 10px;
	text-align: center;
}

ul {
	list-style-type: none;
	padding: 0;	/*Tolgo il padding da ul*/
}

li a{
	display: block;	/* Separo per riga i padding*/
	padding: 8px 16px;
	color: #000;	/* Rimuovo il classico colore viola del link*/
	text-decoration: none;	/*rimuovo la sottilineatura del link*/
	
}

li a:hover {	/* Cosa fare quando il mouse si trova sopra*/
	background-color: #555;
	color: white;
}

footer{
	background: #aaa;
	color: white;
	padding: 0px;
}

img{
	padding: 10px;
  height: 505px;
  width: 829px;
}

/*Riposiziono gli elementi se la larghezza è >=768px per tutti i dispositivi*/
@media all and (min-width: 768px){
	
	nav {
		text-align: left;
		max-width: 200px;
		float: left;	/*Sposto il contenuto a destra*/
	}

	article {
		margin-left: 250px;
	}


}

<!DOCTYPE html>
<html>
	<head>
		<title>Index</title>
		<link rel="stylesheet" href="Index.css">
	</head>
	
	<body>
		<header>
			<h1 id="T">Index</h1>
		</header>
		
		<nav>
			<ul>
				<li><a>Topologie</a></li>
				<li><a>Classificazione</a></li>
				<li><a>Dizionario terminologico</a></li>
				<li><a href="Pagine\Domini.html">Domini</a></li>
				<li><a>Apparati</a></li>
			</ul>
		</nav>
		
		<article>
			<h2>Definizione di Rete</h2>
			Una rete di telecomunicazioni è un insieme di dispositivi e dei loro collegamenti 
			(fisici o logici) che consentono la trasmissione e la ricezione di informazioni di 
			qualsiasi tipo tra due o più utenti situati in posizioni geograficamente distinte, 
			effettuandone il trasferimento attraverso cavi, sistemi radio o altri sistemi elettromagnetici 
			o ottici.

		<br><br><img src="Immagini/ImmagineRete.png">

		</article>

		<footer>
			<p>Ultimo aggiornamento: Sabato 19 Maggio</p>
			<p><a href="#T">Torna all'inizio</a></p>
		</footer>
		
	</body>
</html>

我想要这种行为： https://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_flexbox

在上面的示例中，导航栏高度会扩展为页脚。

Answer 1

将导航的高度设置为当前屏幕尺寸的高度，我很确定这可以完成这项工作。

nav {
background: #eee;
padding: 10px;
text-align: center;
height: 100vh;
}

Answer 2

我会将nav和article包裹在main标记内，然后将其display: flex包围，然后将最高 {{1只要您使用height默认情况下float它们将彼此相邻，并且还从您不需要它的nav中删除dispaly:flex

flex-direction:row

<main>
 <nav></nav>
 <article></article>
</main>

 
p { margin: 0; }

article {
    text-align: left;
  }

  header {
    background: black; 
    color: white;
    padding: 10px;
    text-align: center;
  }

  nav {
    background: #eee;
    padding: 10px;
    text-align: center;
  }

  ul {
    list-style-type: none;
    padding: 0;	/*Tolgo il padding da ul*/
  }

  li a{
    display: block;	/* Separo per riga i padding*/
    padding: 8px 16px;
    color: #000;	/* Rimuovo il classico colore viola del link*/
    text-decoration: none;	/*rimuovo la sottilineatura del link*/

  }

  li a:hover {	/* Cosa fare quando il mouse si trova sopra*/
    background-color: #555;
    color: white;
  }

  footer{
    background: #aaa;
    color: white;
    padding: 0px;
  }

  img{
    padding: 10px;
    height: 505px;
    width: 829px;
  }

  /*Riposiziono gli elementi se la larghezza è >=768px per tutti i dispositivi*/
  @media all and (min-width: 768px){

      main {
         display: flex;
      }

    nav {
      text-align: left;
      max-width: 200px;
      margin-right: 50px;
    }
  }

HTML垂直导航栏高度到页脚

2 个答案: