1. ホーム
  2. 質問と答え
  3. 親のdivの幅を無視する

親のdivの幅を無視する

2017-07-07 8 views
1

モバイル用のナビゲーションバーを変更する際に問題がありました。私はナビゲーションバーがその親divを無視するようにしたいinner-wrapper幅は80%で、全幅は100%です。親のdivの幅を無視する

私は考えることができる最も論理的な解決策は100%のwidthでabsoluteにheader: relative、width: 100%とheader liを設定することです。しかし、これは動作していないようです。

それぞれのナビゲーションは、親ラッパーの全幅ではなく、画面の全幅を持つようにします。

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

出典

2017-07-07 James

+0

あなたが試みたポジション：絶対;ナビで？ –

答えて

1

ビューポートユニットの使用は、最初は良いアイデアのようですが、この場合は、headerがoverflow: hiddenを使用するため、使用する必要はありません。あなたが100vwを使用して起動した場合

注、それが不要なスクロールバーを引き起こし、および/またはその親/ボディがスクロールバーに

を持っているときheader-liがheaderに関連する要素が不要な方法で動作することができます（最も近い祖先の位置がstatic以外の場合）、単に100%とtransform: translateを配置するだけです。 1は、それが自分自身を配置する方法

を見るよう

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

header-liは、両方の、overflow: hiddenを削除100vwを使用してpaddingulがデフォルトとして持って削除する必要があります、だけでなくheaderを超えて拡大する（または他のあなたは、スクロールを取得します）

出典

2017-07-07 21:49:15 LGSon

1

どのようにこのジェームズですか？

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

出典

2017-07-07 19:47:56

+1

私はあなたが私の記事を読むなら、これは私がすでに試みた解決策だと信じています:) – James

+0

ああ、申し訳ありません、それは私の悪です。それは長い一日でした.. –

+1

心配しないで、とにかく多くの感謝:) – James

1

あなたは、ナビゲーション子の画面を使用width: 100vw;の全幅を持つようにしたい場合。これはビュー幅の100％を意味します

出典

2017-07-07 19:56:11 Arijoon

+0

これは幾分働いた、それは90％を使用して、それはマージン右以上の10％マージン - 左のままになります。なぜそれが完全にビューの幅をカバーしていないのか分かりませんか？ – James

+0

ラッパーがmargin：0 autoに設定されていることと関係しています。センタリングは何らかの理由で1つのマージンを無視していますが、他のマージンは無視しています。 – James

+0

あなたはそれに 'margin：-10％'を与えることも、それに影響を与えるマージンを削除することもできます – Arijoon

関連する問題

 関連する問題