忽略父div的寬度

Question

我在修改移動導航欄時遇到了問題。我希望導航欄忽略其父分區inner-wrapper寬度80%並使用全寬100%。

我能想到的最合理的解決方案是設置header: relative，width: 100%和header li到absolute與100%一個width。但是，這似乎並不奏效。

我希望每個導航都有一個完整寬度的屏幕，而不是其父包裝的全寬。

.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

的100％使用視窗單位最初似乎是個好主意，但在這種情況下，是沒有必要的，將是沒有用的作爲header使用overflow: hidden。

注意，如果你開始使用100vw它可能會導致不必要的滾動條和/或使該元件的行爲以意外方式時，其父/身體有滾動條

---

由於header-li涉及header （最近的祖先的位置不是static），只需使用100%和transform: translate來定位它。

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

注意，它下面的示例我彩色是淺灰色所以一看到它是如何將自身定位

棧片斷

.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>

---

如果您想在header-li擴大超出了header，以及，你將需要刪除都overflow: hidden，使用100vw並刪除padding的ul具有作爲默認（否則你會得到一個滾動）

.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

這個怎麼詹姆斯？

.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

如果你想導航到對孩子的屏幕使用width: 100vw;的整個寬度。這意味着視圖寬度