** This is my very first inquiry on this web site, and also I’m basically a beginner when it involves internet advancement, so sorry ahead of time if this is an unbelievable foolish inquiry, yet I can not, for the life of me, number this out:
To Start With, below’s my html code, straightforward sufficient: **
<.
<< html lang=" de">
<> < head>>.
<< meta charset=" utf-8">
<> < meta name=" viewport" web content=" size= device-width, initial-scale= 1">
<> < title>> EXAMINATION<.
<< web link rel=" stylesheet" kind=" text/css" href=" src/css/styles. css">
<> .
<< body course=" flexbox">
<> < area id=" navbar" course=" flexbox">
<> < ul>>.
<< li>> Aktuell<.
<< li>> Schauspiel<.
<< li>> Projekte<.
<< li>> Gallerie<.
<< li>> Personalien<.
<< li>> Blog site<.
<< li>> Hyperlinks<.
<< li>> Kontakt<.
<< li>> Impressum<.
<.
<.
<< area id=" web content" course=" flexbox">
<> < short article id=" reel">
<> < img src=" src/img/istockphoto. jpg" alt=" Laechelnde Frau">>.
<.
<< short article id=" quote">> Lorem ipsum dolor rest amet consectetur, adipisicing elit. Tempora doloribus commodi aspernatur blanditiis. Nobis optio libero method reiciendis iusto.
repellendus harum odit! Natus sed voluptatibus explicabo quo voluptatum eius abdominal muscle?
<.
<.
<.
<.
and also below is the particular css:
/ * GENERAL */.
* {box-sizing: border-box;}
. flexbox {display screen: flex;}
html {font-size:.8 vw;
font-family: Arial, Helvetica, sans-serif;
size: 100%;
elevation: 100%;
background-color: off-white;}
body {size: 100%;
margin: 0;
flex-direction: row;
align-items: stretch;}
@media( max-width:425 px) {#body {flex-direction: column;
align-items: facility;}}
/ * NAVIGATING */.
#navbar {background-color: palegreen;
size: 10%;
elevation: 100%;
flex-direction: column;
align-items: stretch;}
@media( max-width:1024 px) {#navbar {size:12%;}}
@media( max-width:768 px) {#navbar {size:14%;}}
@media( max-width:425 px) {#navbar {display screen: none;}}
#navbar>> ul {list-style-type: none;
background-color: palegreen;
extra padding: 0 0 0 0;
elevation: 100%;}
#navbar>> ul>> li {display screen: block;
font-size: 1.5 rapid eye movement;
size: automobile;
extra padding: 15% 15% 15% 15%;}
@media( max-width:1024 px) {#navbar>> ul>> li {font-size: 1.8 rapid eye movement;}}
@media( max-width:768 px) {#navbar>> ul>> li {font-size: 2rem;}}
/ * MATERIAL */.
#content {size: 90%;.
elevation: 100%;.
flex-direction: column;}
@media( max-width:1024 px) {#content {size:88%;}}
@media( max-width:768 px) {#content {size:86%;}}
@media( max-width:425 px) {#content {size:100%;}}
#reel {size:60%;.
margin: 7% automobile 0 automobile;}
@media( max-width:768 px) {#reel {size:70%;}}
#reel>> img {size:100%;.
border-radius: 10px;}
#quote {size:60%;.
background-color: palegreen;.
border-radius: 10px;.
font-size: 1.2 rapid eye movement;.
font-style: italic;.
text-align: facility;.
line-height: 150%;.
margin: 5% automobile 2% automobile;.
extra padding: 1%}
@media( max-width:1024 px) {#quote {font-size: 1.5 rapid eye movement;}}
@media( max-width:768 px) {#quote {font-size: 2rem;.
size:70%;}}
@media( max-width:425 px) {#quote {font-size: 3.3 rapid eye movement;}}
@media( max-width:375 px) {#quote {font-size: 3.5 rapid eye movement;}}
@media( max-width:320 px) {#quote {font-size: 4rem;}}
** What I wish to occur is for the area #navbar to constantly be the precise very same elevation as the area #content, both 100% of the display screen. So, what I attempted is offering both of them 100% elevation of their parent-element, the body-element.
The issue is that the environment-friendly history of area #navbar and/or area #navbar>> ul simply will certainly not extend to the base at the exact same degree as its sibling-element area #content in spite of both acquiring the exact same elevation from their parent-element.
area #content being taller, it must be the one to specify the general elevation of both sibling-elements in addition to the parent-element body, thinking about the last has no particular elevation itself and also need to as a result be equally as high as it requires to be to show every one of its child-elements.
( I began with the body-element likewise having elevation:100%; which sort of repaired this particular issue somewhat, yet created also weirder ones I really did not comprehend, particularly when any type of components were not completely within the viewport, so I ditched it. I likewise attempted making use of vh as a system for the various components' height-property, yet that caused basically the exact same mayhem. I likewise attempted offering area #navbar and also area #navbar>> ul the.flexbox-class and also a couple of various residential or commercial properties, none of which functioned.)
I think I'm messing up something with the position-property as I still can not cover my head around just how it functions and also as a result have not specified it for any type of components. Yet I have actually attempted that also, offering numerous of the components included various position-properties, none of which assisted. I likewise do not actually comprehend drifts, so those have not been made use of either. **
