divが自動的に残りの横幅を占めるCSSを探したい

親divに2つの子divがあり、子divの1つが特定の値の幅を占めている場合は、CSS他の子divが自動的に残りの水平次元を占めることを示します。divが自動的に残りの横幅を占めるCSSを探したい

* { 
 
    margin:0; 
 
    padding:0; 
 
} 
 
a { 
 
    text-decoration:none; 
 
} 
 
li { 
 
    list-style:none; 
 
} 
 
img { 
 
    height:100%; 
 
    border:0; 
 
} 
 
body,html { 
 
    width:100%; 
 
    height:100%; 
 
} 
 
body { 
 
    background-color:#161716; 
 
    padding:2%; 
 
    box-sizing:border-box; 
 
} 
 
#container { 
 
    width:100%; 
 
    height:100%; 
 
    background-color:aquamarine; 
 
    display:flex; 
 
    flex-flow:row wrap; 
 
    align-items:center; 
 
    justify-content:space-between; 
 
} 
 
#scroll { 
 
    width:2%; 
 
    height:20%; 
 
    margin-right:1%; 
 
    background-color:burlywood; 
 
} 
 
#container_in { 
 
    width: calc(100% - 26%); 
 
    height:100%; 
 
    margin-left:1%; 
 
    margin-right:1%; 
 
    background-color:deepskyblue; 
 
} 
 
#side { 
 
    width:20%; 
 
    height:100%; 
 
    margin-left:1%; 
 
    background-color:bisque; 
 
} 
 
#header { 
 
    width:100%; 
 
    height:15%; 
 
} 
 
header { 
 
    display:table; 
 
    width:100%; 
 
    height:100%; 
 
    background-color:darkviolet; 
 
} 
 
#logo { 
 
    width:fit-content; 
 
    height:100%; 
 
    background-color:azure; 
 
} 
 

 
#logo a { 
 
    width:fit-content; 
 
    height:100%; 
 
} 
 
#navi { 
 
    display:table-cell; 
 
    width:auto; 
 
    height:100%; 
 
    background-color:navajowhite; 
 
}

<!doctype html> 
 
<html> 
 
    <head> 
 
    <title>Untitled</title> 
 
    <link href="css/index.css" type="text/css" rel="stylesheet"> 
 
    </head> 
 
    <body> 
 
    <div id="container"> 
 
     <div id="scroll"> 
 
     </div> <!-- scroll end --> 
 
     <div id="container_in"> 
 
     <div id="header"> 
 
      <header> 
 
      <div id="logo"> 
 
       <a href="#"> 
 
       <img src="img/logo.jpg"> 
 
       </a> 
 
      </div> <!-- logo end -->   
 
      <div id="navi"> 
 
       <nav> 
 
       <ul> 
 
        <li><a href="#"></a></li> 
 
        <li><a href="#"></a></li> 
 
        <li><a href="#"></a></li> 
 
        <li><a href="#"></a></li> 
 
        <li><a href="#"></a></li> 
 
        <li><a href="#"></a></li> 
 
       </ul> 
 
       </nav> 
 
      </div> <!-- navi end --> 
 
      </header> 
 
     </div> <!-- header end --> 
 
     </div> <!-- container_in end --> 
 
     <div id="side"> 
 

 
     </div> <!-- side end --> 
 
    </div> <!-- container end --> 
 
    </body> 
 
</html>

全体構造一旦上記のコードのようなものです。

私の質問はdiv#headerセクションです。

div#header headerは、div#headerの子要素です。

div#header headerには、2つの子divが含まれています。

親領域（div#header header）には、#logoと#naviが含まれています。

#logo領域の幅は、#logo子領域のイメージサイズと一致するようにwidth: fit-content;となります。

他の子#naviは#logo子の幅の値を知らずにwidth: calc (100% - 10px)と同じ方法を使用できません。

div＃ヘッダーヘッダー領域の#logo領域の残りの部分が自動的に#naviで占有されるように、私はCSSのみを使用したいと考えています。

出典

2017-01-04 NavyAndRed

はここスニペットワーキング

はあなたがすべての残りのスペースに

#container_in{ 
    flex:1; 
}

最小符号化を与えたいのdivにflex:1を追加flexプロパティと、それを簡単に：

#container{ 
 
    display: flex; 
 
    align-items: center; 
 
    text-align: center; 
 
} 
 
#container div{ 
 
    padding: 5px 10px; 
 
} 
 
#container_in{ 
 
    flex:1; 
 
    background: blue; 
 
} 
 
#scroll{ 
 
    background: red; 
 
} 
 
#side{ 
 
    background: green; 
 
}

<div id="container"> 
 
    <div id="scroll">scroll</div> 
 
    <div id="container_in">It will occupy remaining space</div> 
 
    <div id="side"> side</div> 
 
</div>

作業Demoここに

出典

2017-01-04 09:15:39

ありがとう。^^ 問題が解決しました。 – NavyAndRed

divが自動的に残りの横幅を占めるCSSを探したい

答えて

関連する問題