ピクセル単位の幅と残りの部分の幅をパーセンテージで設定できますか？私は、メニューの一部のメニュー部分とコンテンツpart.the 専門を作成しようとしましたよ上記のコードで

Question

aside { 
 
    background-color: blue; 
 
    width: 220; 
 
    list-style: none; 
 
    height: 100%; 
 
    float:left; 
 
} 
 

 
article { 
 
    background-color: red; 
 
    width:60%; 
 
    height:100%; 
 
    float: left; 
 
}

 <aside> 
 
      <ul> 
 
       <li><a>1st item</a></li> 
 
       <li><a>2nd item</a></li> 
 
       <li><a>3rd item</a></li> 
 
       <li><a>4th item</a></li> 
 
      </ul> 
 
     </aside> 
 
      
 
     <article> 
 
      <p>contents here</p> 
 
     </article>

それは幅ですされ、ウィンドウのサイズが変更された場合でも同じです。しかし、コンテンツの部分は、ウィンドウのサイズ変更に合わせてサイズを変更する必要があります。しかし、上記のデザインはレスポンシブなデザインではありません。レスポンスを失うことなく、そのようなメニューとコンテンツパーツをデザインすることは可能ですか？

Answer 1

がarticleからwidthとfloatプロパティを削除し、このようoverflow: hidden

aside { 
 
    background-color: blue; 
 
    width: 150px; 
 
    float:left; 
 
} 
 

 
aside ul { 
 
    list-style: none; 
 
} 
 

 
article { 
 
    background-color: red; 
 
    overflow: hidden; 
 
}

<aside> 
 
    <ul> 
 
    <li><a>1st item</a></li> 
 
    <li><a>2nd item</a></li> 
 
    <li><a>3rd item</a></li> 
 
    <li><a>4th item</a></li> 
 
    </ul> 
 
</aside> 
 
      
 
<article> 
 
    <p>contents here</p> 
 
</article>

Answer 2

を追加しますか？

.wrap { 
 
    display: flex; 
 
} 
 
aside { 
 
    background-color: blue; 
 
    width: 220; 
 
    list-style: none; 
 
    height: 100%; 
 
} 
 

 
article { 
 
    background-color: red; 
 
    height:100%; 
 
    float: left; 
 
    flex: 1; 
 
}

<div class="wrap"> 
 
    
 
    <aside> 
 
    <ul> 
 
     <li><a>1st item</a></li> 
 
     <li><a>2nd item</a></li> 
 
     <li><a>3rd item</a></li> 
 
     <li><a>4th item</a></li> 
 
    </ul> 
 
    </aside> 
 

 
    <article> 
 
    <p>contents here</p> 
 
    </article> 
 

 
</div>

Answer 3

おそらく（CSS3のCALCを使用する必要があります）、これは直接のユースケースのように思えます。

aside { 
 
    background-color: blue; 
 
    width: 100px; // modified, you did not indicate units 
 
    list-style: none; 
 
    height: 100%; 
 
    float:left; 
 
} 
 

 
article { 
 
    background-color: red; 
 
    width:calc(100% - 100px); // modified 
 
    height:100%; 
 
    float: left; 
 
}

<aside> 
 
    <ul> 
 
    <li><a>1st item</a></li> 
 
    <li><a>2nd item</a></li> 
 
    <li><a>3rd item</a></li> 
 
    <li><a>4th item</a></li> 
 
    </ul> 
 
</aside> 
 

 
<article> 
 
    <p>contents here</p> 
 
</article>

は、ここでは、ブラウザのサポートについての記事を読む： http://caniuse.com/#search=calc