liのドロップダウンをどのようにしてビューポートの全幅にしますか？

Question

リストを使ってnavを構築したい。最後のリスト項目にはulが入ります。私はそのulをデフォルトで隠しておき、それが親のliがぶら下がっているときにだけ見えるようにしておきます。私はmy-dropdown-contentをビューポートの全幅にしたいと思っています。親の幅だけでなく、私はそれをするように見えることはできません。

が添付された画像は、私が上で推移したときに、フル幅を取るためにドロップダウンリストを台無しにすることを望む...のように私のNAVはどのように見えるかを示して、「もっと..」

http://imgur.com/a/6ID54

を私のようなコードを持っていますこの：私は私を作るためにmin-widthを使用している

.my-dropdown{ 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.my-dropdown-content{ 
 
    display: none; 
 
    position: absolute; 
 
    right: 0; 
 
    background-color: #0A141A; 
 
    min-width: 1400px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    z-index: 1; 
 
} 
 

 
.my-dropdown-content li { 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
.my-dropdown:hover .my-dropdown-content { 
 
    display: block; 
 
}

<ul> 
 
    <li><a href="#"></a></li> 
 
    <li><a href="#"></a></li> 
 
    <li><a href="#"></a></li> 
 
    <li><a href="#"></a></li> 
 
    <li class="my-dropdown"><a href="#">More. . .</a> 
 
    <ul class="my-dropdown-content"> 
 
     <div class="col-md-12"> 
 
     <div class="row"> 
 
      <div class="col-md-4"><li><a href="#"></a></li></div> 
 
      <div class="col-md-4"><li><a href="#"></a></li></div> 
 
      <div class="col-md-4"><li><a href="#"></a></li></div> 
 
     </div> 
 
     </div> 
 
    </ul> 
 
    </li> 
 
</ul>

全幅を取ることはできませんが、ウィンドウのサイズを変更するとすべてが台無しになります。解決策が必要です。あなたが私を助けてくれれば非常に感謝しています。

Answer 1

「100％」使用vwユニット（ビューポート幅）を使用し、100vwに設定してください。

.my-dropdown-content{ 
    display: none; 
    position: absolute; 
    right: 0; 
    background-color: #0A141A; 
    width: 100vw; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    z-index: 1; 
} 

---

全作業例

/* vv for demonstration purposes only*/ 
 
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 
body{padding-top:60px;} 
 
.menu{list-style:none;padding:0;} 
 
.menu>li{float:left;width:20%;} 
 
.menu>li>a{display:block;border:1px solid black;padding:1em} 
 
/* ^^ for demonstration purposes only*/ 
 

 
.my-dropdown{ 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.my-dropdown-content{ 
 
    display: none; 
 
    position: absolute; 
 
    right: 0; 
 
    background-color: #0A141A; 
 
    width: 100vw; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    z-index: 1; 
 
} 
 

 
.my-dropdown-content li { 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
.my-dropdown:hover .my-dropdown-content { 
 
    display: block; 
 
}

<ul class="menu"> 
 
    <li><a href="#">1</a></li> 
 
    <li><a href="#">2</a></li> 
 
    <li><a href="#">3</a></li> 
 
    <li><a href="#">4</a></li> 
 
    <li class="my-dropdown"><a href="#">More. . .</a> 
 
    <ul class="my-dropdown-content"> 
 
     <div class="col-md-12"> 
 
     <div class="row"> 
 
      <div class="col-md-4"><li><a href="#">sub-1</a></li></div> 
 
      <div class="col-md-4"><li><a href="#">sub-1</a></li></div> 
 
      <div class="col-md-4"><li><a href="#">sub-1</a></li></div> 
 
     </div> 
 
     </div> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 2

あなたは.my-dropdown-contentのmin-widthを設定することで、問題を解決することができますので、以下のようにhoverに

.my-dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.my-dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    right: 0; 
 
    background-color: #0A141A; 
 
    min-width: 1400px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    z-index: 1; 
 
} 
 

 
.my-dropdown-content li { 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
.my-dropdown:hover .my-dropdown-content { 
 
    display: block; 
 
    position: fixed; 
 
    height: 100vh; 
 
    width: 100vw; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.my-dropdown-content a{ 
 
    text-decoration:none; 
 
    color:#fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<ul> 
 
    <li> 
 
    <a href="#"></a> 
 
    </li> 
 
    <li> 
 
    <a href="#"></a> 
 
    </li> 
 
    <li> 
 
    <a href="#"></a> 
 
    </li> 
 
    <li> 
 
    <a href="#"></a> 
 
    </li> 
 
    <li class="my-dropdown"><a href="#">More. . .</a> 
 
    <ul class="my-dropdown-content"> 
 
     <div class="col-md-12"> 
 
     <div class="row"> 
 
      <div class="col-md-4"> 
 
      <li><a href="#">one</a></li> 
 
      </div> 
 
      <div class="col-md-4"> 
 
      <li><a href="#">two</a></li> 
 
      </div> 
 
      <div class="col-md-4"> 
 
      <li><a href="#">three</a></li> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 3

をposition as fixedを使用すると、それは良い出発点であることを行うことができます。問題はウィンドウのサイズ変更にあります。 getDesiredSizeはあなたがアイテムを取ると、その所望のmin-widthを返しますどの実装する必要がある関数であろう

document.getElementsByTagName("body")[0].addEventListener("resize", function() { 
    var dropDownContents = document.getElementsByClassName("my-dropdown-content"); 
    for (var index in dropDownContents) { 
     dropDownContents[index].style["min-width"] = getDesiredSize(dropDownContents[index]); 
    } 
}); 

：だから、イベントのサイズを変更するウィンドウを定義する必要があります。 min-widthのすべての値がsizeの値に関係なく互いに等しくなる場合は、resizeイベントごとに1回計算できます。あなたがオーバー複雑にする必要はありません

Answer 4

....ではなく、「最小幅：1400px」の ：あなたは、あなたができる達成したいbrowser supportによって

.my-dropdown-content { 
    display: none; 
    position: absolute; 
    right: 0; 
    background-color: #0A141A; 
    /* min-width: 1400px; */ 
    width:100%; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    z-index: 1; 
}