ignorieren Eltern divs Breite

Question

Ich hatte Probleme mit einer Navigationsleiste für mobile zu ändern. Ich möchte, dass die Navigationsleiste das übergeordnete Element inner-wrapper der Breite 80% ignoriert und eine volle Breite von 100% verwendet.

Die logischste Lösung, die ich denken kann, ist einstellen header: relative, width: 100% und header li zu absolute mit einem width von 100%. Dies scheint jedoch nicht zu funktionieren.

Ich möchte jede Navigation eine volle Breite des Bildschirms statt eine volle Breite des übergeordneten Wrappers haben.

.header { 
 
    background-color: #FFB6C1; 
 
    color: black; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.inner-wrapper { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    margin-top: 30px; 
 
    margin-bottom: 20px; 
 
} 
 

 
.header h2 { 
 
    float: left; 
 
    font-family: 'Pacifico', sans-serif; 
 
    font-size: 30px; 
 
} 
 

 
.header h3 { 
 
    padding-top: 5px; 
 
    font-family: 'Petit Formal Script'; 
 
    clear: both; 
 
    font-weight: 700; 
 
} 
 

 
.header span { 
 
    font-weight: bolder; 
 
} 
 

 
.header ul { 
 
    float: right; 
 
    margin-right: 10% 
 
} 
 

 
.header ul li { 
 
    list-style: none; 
 
    display: inline-block; 
 
    font-family: 'Podkova', sans-serif; 
 
    margin-right: 20px; 
 
    font-weight: bold; 
 
} 
 
/* Navigation Menu click for mobile */ 
 

 
.mobile-menu { 
 
    padding: 0; 
 
    margin: 0; 
 
    display: none; 
 
} 
 
/* Smartphones (portrait) ----------- */ 
 

 
@media only screen and (max-width: 414px) { 
 
    /* Styles */ 
 
    /* Display flex to change the ordering of HTML elemtns*/ 
 
    .inner-wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    margin-bottom: 0px; 
 
    } 
 
    .header-title { 
 
    order: 1; 
 
    } 
 
    .header-description { 
 
    order: 2; 
 
    } 
 
    .dropdown { 
 
    order: 3; 
 
    } 
 
    .header-li { 
 
    display: none; 
 
    position: absolute; 
 
    width: 100%; 
 
    } 
 
    .header ul { 
 
    float: none; 
 
    margin-right: 0%; 
 
    } 
 
    .mobile-menu { 
 
    padding: 0; 
 
    margin: 0; 
 
    display: initial; 
 
    cursor: pointer; 
 
    } 
 
    .header ul li { 
 
    width: 100%; 
 
    background-color: green; 
 
    padding-top: 20px; 
 
    } 
 
    .header { 
 
    position: relative; 
 
    width: 100%; 
 
    } 
 
}

<!-- Header and Navigation --> 
 
<div class="header"> 
 
    <div class="inner-wrapper"> 
 
    <h2 class="header-title">text</h2> 
 
    <div class="dropdown"> 
 
     <div class="mobile-menu"> 
 
     <p align="right">Menu</p> 
 
     </div> 
 
     <ul class="header-li"> 
 
     <li>About me</li> 
 
     <li>Progress</li> 
 
     <li>Food</li> 
 
     <li>Contact</li> 
 
     </ul> 
 
    </div> 
 
    <h3 class="header-description">text</span></h3> 
 
    </div> 
 
</div>

Answer 1

Die Verwendung von Viewport-Einheiten scheint zunächst eine gute Idee zu sein, obwohl sie in diesem Fall nicht notwendig ist und nichts nützen wird, da die header 10 verwendet.

Hinweis, wenn Sie mit 100vw starten kann es unerwünschte Scrollbar verursachen und/oder das Element in unerwünschter Weise verhalten, wenn seine Eltern/Körper Scrollbar hat

---

Da die header-li zum header bezieht (nächsten Vorfahren mit einer anderen Position als static), verwenden Sie einfach 100% und transform: translate, um es zu positionieren.

.header-li { 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 100%; 
    background: lime; 
} 

Hinweis, es unten Probe ich es hellgrau gefärbt, so sehen, wie sie positioniert sich

Stapel Snippet

.header { 
 
    background-color: #FFB6C1; 
 
    color: black; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.inner-wrapper { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    margin-top: 30px; 
 
    margin-bottom: 20px; 
 
} 
 

 
.header h2 { 
 
    float: left; 
 
    font-family: 'Pacifico', sans-serif; 
 
    font-size: 30px; 
 
} 
 

 
.header h3 { 
 
    padding-top: 5px; 
 
    font-family: 'Petit Formal Script'; 
 
    clear: both; 
 
    font-weight: 700; 
 
} 
 

 
.header span { 
 
    font-weight: bolder; 
 
} 
 

 
.header ul { 
 
    float: right; 
 
    margin-right: 10% 
 
} 
 

 
.header ul li { 
 
    list-style: none; 
 
    display: inline-block; 
 
    font-family: 'Podkova', sans-serif; 
 
    margin-right: 20px; 
 
    font-weight: bold; 
 
} 
 

 
.header-li { 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    width: 100%; 
 
    background: lightgray; 
 
} 
 

 

 
/* Navigation Menu click for mobile */ 
 

 
.mobile-menu { 
 
    padding: 0; 
 
    margin: 0; 
 
    display: none; 
 
} 
 

 

 
/* Smartphones (portrait) ----------- */ 
 

 
@media only screen and (max-width: 414px) { 
 
    /* Styles */ 
 
    /* Display flex to change the ordering of HTML elemtns*/ 
 
    .inner-wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    margin-bottom: 0px; 
 
    } 
 
    .header-title { 
 
    order: 1; 
 
    } 
 
    .header-description { 
 
    order: 2; 
 
    } 
 
    .dropdown { 
 
    order: 3; 
 
    } 
 
    .header-li { 
 
    display: none; 
 
    position: absolute; 
 
    width: 100%; 
 
    } 
 
    .header ul { 
 
    float: none; 
 
    margin-right: 0%; 
 
    } 
 
    .mobile-menu { 
 
    padding: 0; 
 
    margin: 0; 
 
    display: initial; 
 
    cursor: pointer; 
 
    } 
 
    .header ul li { 
 
    width: 100%; 
 
    background-color: green; 
 
    padding-top: 20px; 
 
    } 
 
    .header { 
 
    position: relative; 
 
    width: 100%; 
 
    } 
 
}

<!-- Header and Navigation --> 
 
<div class="header"> 
 
    <div class="inner-wrapper"> 
 
    <h2 class="header-title">text</h2> 
 
    <div class="dropdown"> 
 
     <div class="mobile-menu"> 
 
     <p align="right">Menu</p> 
 
     </div> 
 
     <ul class="header-li"> 
 
     <li>About me</li> 
 
     <li>Progress</li> 
 
     <li>Food</li> 
 
     <li>Contact</li> 
 
     </ul> 
 
    </div> 
 
    <h3 class="header-description"><span>text</span></h3> 
 
    </div> 
 
</div>

---

Wenn Sie wollen die header-li über die header als auch zu erweitern, müssen Sie beide overflow: hidden entfernen, verwenden Sie 100vw und entfernen Sie die padding die ul als Standard (oder sonst werden Sie eine Rolle bekommen)

.header { 
 
    background-color: #FFB6C1; 
 
    color: black; 
 
    position: relative; 
 
} 
 

 
.inner-wrapper { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    margin-top: 30px; 
 
    margin-bottom: 20px; 
 
} 
 

 
.header h2 { 
 
    float: left; 
 
    font-family: 'Pacifico', sans-serif; 
 
    font-size: 30px; 
 
} 
 

 
.header h3 { 
 
    padding-top: 5px; 
 
    font-family: 'Petit Formal Script'; 
 
    clear: both; 
 
    font-weight: 700; 
 
} 
 

 
.header span { 
 
    font-weight: bolder; 
 
} 
 

 
.header ul { 
 
    float: right; 
 
    margin-right: 10% 
 
} 
 

 
.header ul li { 
 
    list-style: none; 
 
    display: inline-block; 
 
    font-family: 'Podkova', sans-serif; 
 
    margin-right: 20px; 
 
    font-weight: bold; 
 
} 
 

 
.header-li { 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    width: 100vw; 
 
    background: lightgray; 
 
    padding: 0; 
 
} 
 

 

 
/* Navigation Menu click for mobile */ 
 

 
.mobile-menu { 
 
    padding: 0; 
 
    margin: 0; 
 
    display: none; 
 
} 
 

 

 
/* Smartphones (portrait) ----------- */ 
 

 
@media only screen and (max-width: 414px) { 
 
    /* Styles */ 
 
    /* Display flex to change the ordering of HTML elemtns*/ 
 
    .inner-wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    margin-bottom: 0px; 
 
    } 
 
    .header-title { 
 
    order: 1; 
 
    } 
 
    .header-description { 
 
    order: 2; 
 
    } 
 
    .dropdown { 
 
    order: 3; 
 
    } 
 
    .header-li { 
 
    display: none; 
 
    position: absolute; 
 
    width: 100%; 
 
    } 
 
    .header ul { 
 
    float: none; 
 
    margin-right: 0%; 
 
    } 
 
    .mobile-menu { 
 
    padding: 0; 
 
    margin: 0; 
 
    display: initial; 
 
    cursor: pointer; 
 
    } 
 
    .header ul li { 
 
    width: 100%; 
 
    background-color: green; 
 
    padding-top: 20px; 
 
    } 
 
    .header { 
 
    position: relative; 
 
    width: 100%; 
 
    } 
 
}

<!-- Header and Navigation --> 
 
<div class="header"> 
 
    <div class="inner-wrapper"> 
 
    <h2 class="header-title">text</h2> 
 
    <div class="dropdown"> 
 
     <div class="mobile-menu"> 
 
     <p align="right">Menu</p> 
 
     </div> 
 
     <ul class="header-li"> 
 
     <li>About me</li> 
 
     <li>Progress</li> 
 
     <li>Food</li> 
 
     <li>Contact</li> 
 
     </ul> 
 
    </div> 
 
    <h3 class="header-description"><span>text</span></h3> 
 
    </div> 
 
</div>

Answer 2

Wie ist dieser James?

.theContainer { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: gray; 
 
    position: relative; 
 
} 
 

 
.theParent { 
 
    width: 80%; 
 
    height: 150px; 
 
    background-color: lightgray; 
 
} 
 

 
.theChild { 
 
    width: 100%; 
 
    background-color: lightgreen; 
 
    position: absolute; 
 
}

<div class="theContainer"> 
 
    <div class="theParent"> 
 
    This is the parent trying to restrict the child to 80% width. 
 
    <div class="theChild"> 
 
     This is the child with 100% width ignoring parent. 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

Wenn Sie die Navigation wollen width: 100vw; volle Breite des Bildschirms Verwendung haben, auf das Kind. Das bedeutet 100% der Ansichtsbreite