Высота вертикальной панели навигации HTML до нижнего колонтитула - PullRequest
Новая
       8

Высота вертикальной панели навигации HTML до нижнего колонтитула

0 голосов
/ 19 мая 2018

У меня есть такой макет, когда размер экрана превышает 768 пикселей: enter image description here

Но я хочу, чтобы высота вертикальной панели навигации доходила до нижнего колонтитула даже при изменении размера экрана.Вот что я хочу: enter image description here

с цветом фона, очевидно.

Это 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

В приведенном выше примере высота панели навигации увеличивается до нижнего колонтитула.

Ответы [ 2 ]

0 голосов
/ 20 мая 2018

Я оберну nav и article внутри тега main и дам ему display: flex, и он возьмет наивысший 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;
    }
  }
    

    		<header>
    			<h1 id="T">Index</h1>
    		</header>
    		
    		<main>
          <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>
        </main>

    		<footer>
    			<p>Ultimo aggiornamento: Sabato 19 Maggio</p>
    			<p><a href="#T">Torna all'inizio</a></p>
    		</footer>
    		
    	</body>
    </html>
0 голосов
/ 19 мая 2018

Установите высоту вашей навигации на высоту текущего размера экрана, я почти уверен, что это подойдет. 

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