CSS - 左メニュー - 優秀な図書館

この投稿には、私のCSSはあまり良くないと言っておく必要があります。私はCSSCSS - 左メニュー

<div class="leftMenu" id="jobMenu"> 
    <ul> 
     <li ng-click="menuClick(1)"> 
      <p>Menu Item</p> 
     </li> 
     <li ng-click="menuClick(2)"> 
      <p>Menu Item</p> 
     </li> 
     <li ng-click="menuClick(3)"> 
      <p>Menu Item</p> 
     </li> 
     <li ng-click="menuClick(4)"> 
      <p>Menu Item</p> 
     </li> 
     <li ng-click="menuClick(5)"> 
      <p>Menu Item</p> 
     </li> 
     <li ng-click="menuClick(6)"> 
      <p>Menu Item</p> 
     </li> 
    </ul> 
</div>

メニューCSS適用するためのdivに包まれた、本質的に順不同リストである左側のメニューとページがあります。右側には

.leftMenu { 
    display: block; 
    text-align: center; 
    float: left; 
    height: 94vh; 
    border: 1px solid #778390; 
    width: 120px; 
    background-color: #778390; 
    color: white; 
} 

.leftMenu ul { 
    margin-top: 0; 
    list-style: none; 
    padding: 0; 
} 

.leftMenu li { 
    text-align: center; 
    border-bottom: 1px solid #58626B; 
    padding-bottom: 18px; 
    padding-top: 18px; 
    cursor: pointer; 
    font-size: 14px; 
} 

.leftMenu li:hover { 
    background-color: #5d9eca; 
} 

.leftMenu li p { 
    margin: 0; 
    font-family: 'Roboto', sans-serif; 
    font-weight: 300; 
    font-size: 13px; 
}

を、私はKendo Gridのメインページを持っています（この問題はコンテンツの内容に関係なく発生します）。

<div class="bottomSection"> 
    <kendo-grid options="mainGridOptions"> 
    </kendo-grid> 
</div>

CSS：ほとんどのディスプレイ上で

.bottomSection { 
    display: block; 
    padding: 12px 15px; 
    /*float: right;*/ 
    width: 84.5%; 
    height: 60%; 
    /*margin-right: 66px;*/ 
}

、レイアウトはそうのように、完全にレンダリング：

しかし、私は、ウィンドウのサイズを変更および/またはズームインするとき、 bottomSection div要素は、そのように、左側のメニューの下にスローされます。

どのように私は、ウィンドウのサイズが変更されるたびに、それはそう、leftMenuは常に120ピクセル幅のままとbottomSection div要素自体のサイズを変更するので、彼らの両方が関係なく、ウィンドウがどのようなサイズに並んで滞在しないことができますか？私は幅のプロパティとしてパーセントを使用してこれを達成するだろうと思ったでしょうか？

ありがとうございます！

出典

2016-12-02 Andrew Milici

.leftMenu { 
    display: block; 
    text-align: center; 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 94vh; 
    border: 1px solid #778390; 
    width: 120px; 
    background-color: #778390; 
    color: white; 
} 

.bottomSection { 
    display: block; 
    padding: 12px 15px; 
    width: 100%; 
    padding-left: 135px; 
    height: 60%; 
    box-sizing: border-box; 
}

出典

2016-12-02 03:19:24

こんにちはChibiao、私はそれを削除していると、残念ながら、同じ問題が発生します。 –

私は答えを編集しました。 –

私の解決方法は、左のメニューにもパーセンテージを使用することを提案してください。そうすれば、モバイルデバイスは良い経験を得ることができます。 1つのdivに固定幅、もう1つにdivを指定すると、レイアウトに問題が生じる可能性があります。そうは言って

、あなたは左のメニューのために固定を使用するように制限している場合は、ここソリューションです - 私は、主要なレイアウトな側面に焦点を当て、マークアップの一部をカットしました：

html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container { 
 
    width: 100%; 
 
    position: relative; 
 
} 
 
.leftMenu { 
 
    background-color: #333; 
 
    color: #FFF; 
 
    height: 200px; /* for demo purposes */ 
 
    width: 120px; 
 
    position: relative; 
 
} 
 
.bottomSection { 
 
    background-color: #CCC; 
 
    color: #FFF; 
 
    padding: 10px; 
 
    position: absolute; 
 
    left: 120px; 
 
    right: 0; 
 
} 
 
.leftMenu, .bottomSection { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
}

<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
    <div class="container"> 
 
     <div class="leftMenu">Menu</div> 
 
     <div class="bottomSection"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus congue hendrerit. Phasellus luctus quam in nulla mollis finibus. Quisque feugiat, metus sit amet porta fringilla, elit odio sodales mauris, sed gravida turpis felis vitae turpis. Mauris interdum ac magna vel pretium. Nulla porta rutrum velit mollis congue. Proin pellentesque urna et magna lacinia, et tincidunt mi placerat. Nulla suscipit rhoncus viverra. Integer pulvinar at purus non tristique. 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

注意すべき

ポイント：

レイアウトの代わりに、floatためdisplay: inline-blockを使用します。
親DIV（container）が使用される：position: relative（あるいはabsolute）に設定されなければなりません。
bottomSectionの位置決めのためabsoluteを使用します。 leftは120pxに設定されています（左メニューは無視されます）。 rightは0に設定され、画面の反対側に伸びます。
vertical-alignを先頭に、子のdivのアライメントを維持するために、topに設定されています。

出典

2016-12-02 03:48:34 cyrotello

CSS - 左メニュー

答えて

関連する問題