ウィンドウのサイズを変更してdivの高さが調整されない

-2

私はschool project websiteと書いてありますが、問題があります。ブラウザーの幅を変更すると、子divはヘッダーから浮動小数点になります。したがって、ヘッダーの下のdivの幅はヘッダーからfloat-off divの影響を受けます。ウィンドウのサイズを変更してdivの高さが調整されない

<body> 
<div id="page" class="page"> 
<div id="header" class="header"> 
    <div class="headerContainer"> 
     <h1><a href="" title="Gastronerez"><img src="images/logo.png" alt="Gastronerez"></a><span>Gastronerez</span></h1> 
     <ul class="menu"> 
      <li class="active"><a href="" title="Home">Home</a></li> 
      <li><a href="" title="O nás">O nás</a></li> 
      <li><a href="" title="Novinky">Novinky</a></li> 
      <li><a href="" title="Jak objednat">Jak objednat</a></li> 
      <li><a href="" title="Kontakty">Kontakty</a></li> 
     </ul> 
     <ul class="contact"> 
      <li class="first"><i class="fa fa-mobile" aria-hidden="true"> 
</i>+420 603 585 561</li> 
      <li><a href="mailto:[email protected]" title="E-mail"><i 
class="fa fa-envelope-o" aria-hidden="true"></i>[email protected]</a></li> 
     </ul> 
     <ul class="lang"> 
      <li class="cz"><a href="" title="Čeština">CZ</a></li> 
      <li class="line">|</li> 
      <li class="sk"><a href="" title="Slovenština">SK</a></li> 
     </ul> 
    </div> 
</div> 
<div id="categories" class="categories"> 
    <div class="categoriesContainer"> 
     <div class="icons"> 
      <div class="optionlink"><a href="" title="Pracovní stoly"> 
       <div class="option"> 
        <div class="white"> 
         <div class="spriteshape-2"></div> 
        </div> 
        <div class="description special"><span>Pracovní stoly</span></div> 
       </div> 
      </a></div> 
      <div class="optionlink"><a href="" title="Stolové nástavby"> 
       <div class="option"> 
        <div class="gray"> 
         <div class="spriteshape-3"></div> 
        </div> 
        <div class="description special"><span>Stolové nástavby</span></div> 
       </div> 
      </a></div> 
      <div class="optionlink"><a href="" title="Pracovní desky"> 
       <div class="option"> 
        <div class="gray"> 
         <div class="spriteshape-4"></div> 
        </div> 
        <div class="description special"><span>Pracovní desky</span></div> 
       </div> 
      </a></div> 
      <div class="optionlink"><a href="" title="Mycí stoly"> 
       <div class="option"> 
        <div class="gray"> 
         <div class="spriteshape-5"></div> 
        </div> 
        <div class="description"><span>Mycí stoly</span></div> 
       </div> 
      </a></div> 
      <div class="optionlink"><a href="" title="Regály"> 
       <div class="option"> 
        <div class="gray"> 
         <div class="spriteshape-6"></div> 
        </div> 
        <div class="description"><span>Regály</span></div> 
       </div> 
      </a></div> 
      <div class="optionlink"><a href="" title="Skříně"> 
       <div class="option"> 
        <div class="gray"> 
         <div class="spriteshape-7"></div> 
        </div> 
        <div class="description"><span>Skříně</span></div> 
       </div> 
      </a></div> 
      <div class="optionlink"><a href="" title="Police"> 
       <div class="option"> 
        <div class="gray"> 
         <div class="spriteshape-8"></div> 
        </div> 
        <div class="description"><span>Police</span></div> 
       </div> 
      </a></div> 
      <div class="optionlink"><a href="" title="Podstavce"> 
       <div class="option"> 
        <div class="gray"> 
         <div class="spriteshape-9"></div> 
        </div> 
        <div class="description"><span>Podstavce</span></div> 
       </div> 
      </a></div> 
      <div class="optionlink"><a href="" title="Pojezdové dráhy"> 
       <div class="option"> 
        <div class="gray"> 
         <div class="spriteshape-10"></div> 
        </div> 
        <div class="description special"><span>Pojezdové dráhy</span></div> 
       </div> 
      </a></div> 
      <div class="optionlink"><a href="" title="Výlevky"> 
       <div class="option"> 
        <div class="gray"> 
         <div class="spriteshape-11"></div> 
        </div> 
        <div class="description"><span>Výlevky</span></div> 
       </div> 
      </a></div> 
      <div class="optionlink"><a href="" title="Digestoře"> 
       <div class="option"> 
        <div class="gray"> 
         <div class="spriteshape-12"></div> 
        </div> 
        <div class="description"><span>Digestoře</span></div> 
       </div> 
      </a></div> 
      <div class="optionlink"><a href="" title="Vyhřívané"> 
       <div class="option"> 
        <div class="gray"> 
         <div class="spriteshape-13"></div> 
        </div> 
        <div class="description"><span>Vyhřívané</span></div> 
       </div> 
      </a></div> 
      <div class="optionlink"><a href="" title="Chladící"> 
       <div class="option"> 
        <div class="gray"> 
         <div class="spriteshape-14"></div> 
        </div> 
        <div class="description"><span>Chladící</span></div> 
       </div> 
      </a></div> 
      <div class="optionlink"><a href="" title="Transportní zařízení"> 
       <div class="option"> 
        <div class="gray"> 
         <div class="spriteshape-15"></div> 
        </div> 
        <div class="description special"><span>Transportní zařízení</span></div> 
       </div> 
      </a></div> 
     </div> 
    </div> 
</div>

CSS：

.page{ 
    margin: 0 auto; 
    position: relative; 
} 
.header{ 
    background-color: white; 
    min-height: 125px; 
    height: 100%; 
} 
.header .headerContainer{ 
    max-width: 1800px; 
    width: 100%; 
    min-height: 125px; 
    height: 100%; 
    margin: 0 auto; 
    position: relative; 
} 
.header h1{ 
    display: inline-block; 
    width: 249px; 
    height: 85px; 
    margin: 0; 
    margin-top: 21px; 
    margin-left: 28px; 
    float: left; 
} 
.header h1 span{ 
    display: none; 
} 
.header ul{ 
    padding: 0; 
    margin: 0; 
} 
.header .menu{ 
    font-size: 15px; 
    font-weight: 600; 
    display: inline-block; 
    margin: 0; 
    position: relative; 
    top: 56px; 
    left: 122px; 
    float: left; 
} 
.header .menu li{ 
    text-decoration: none; 
    display: inline-block; 
    margin-right: 46px; 
} 
.header .menu li:hover{ 
    color: #00aab9; 
    border-bottom: 3px solid; 
} 
.header .menu li a{ 
    text-decoration: none; 
    color: black; 
} 
.header .menu .active{ 
    color: #00aab9; 
    border-bottom: 3px solid; 
} 
.header .contact{ 
    font-family: 'Muli'; 
    font-size: 15px; 
    font-weight: 400; 
    display: inline-block; 
    margin: 0; 
    position: relative; 
    top: 56px; 
    left: 404px; 
    float: left; 
} 
.header .contact li{ 
    text-decoration: none; 
    display: inline-block; 
    color: #454545; 
} 
.header .contact li.first{ 
    margin-right: 16px; 
} 
.header .contact li i{ 
    font-size: 20px; 
    margin-right: 10px; 
    color: #00aab9; 
} 
.header .contact a{ 
    text-decoration: none; 
    color: #454545; 
} 
.header .lang{ 
    font-size: 15px; 
    font-weight: bold; 
    display: inline-block; 
    margin: 0; 
    position: relative; 
    top: 56px; 
    left: 474px; 
    float: left; 
} 
.header .lang li{ 
    text-decoration: none; 
    display: inline-block; 
} 
.header .lang li.cz{ 
    color: #00aab9; 
    margin-right: 16px; 
} 
.header .lang li.line{ 
    margin-right: 19px; 
    color: #c0c0c0; 
} 
.header .lang li.sk{ 
    color: #3b3b3b; 
} 
.header .lang li a{ 
    text-decoration: none; 
} 
.header .lang li.cz a{ 
    color: #00aab9; 
} 
.header .lang li.sk a{ 
    color: #3b3b3b; 
} 
.categories{ 
    min-height: 230px; 
    height: 100%; 
    background-color: #13bcca; 
    position: relative; 
    overflow: auto; 
} 
.categories .categoriesContainer{ 
    max-width: 1800px; 
    width: 100%; 
    margin: 0 auto; 
    position: relative; 
} 
.categories .icons{ 
    max-width: 1233px; 
    width: 100%; 
    margin: 0 auto; 
    min-height: 150px; 
    height: 100%; 
    padding-top: 36px; 
} 
.categories .optionlink{ 
    height: 59px; 
    width: 175px; 
    display: inline-block; 
    margin-bottom: 29px; 
    float: left; 
} 
.categories .icons a{ 
    text-decoration: none; 
} 
.categories .option{ 
    height: 59px; 
    width: 175px; 
    display: inline-block; 
    margin-bottom: 29px; 
    float: left; 
} 
.categories .icons .white, .categories .icons .gray{ 
    display: inline-block; 
    float: left; 
    line-height: 70px; 
} 
.categories .icons .white{ 
    width: 59px; 
    height: 59px; 
    background-color: #fff; 
    border-radius: 50%; 
    text-align: center; 
} 
.categories .icons .gray{ 
    width: 59px; 
    height: 59px; 
    background-color: #3a3c48; 
    border-radius: 50%; 
    text-align: center; 
} 
.categories .description{ 
    margin-left: 72px; 
    line-height: 1px; 
    width: 69px; 
    text-align: left; 
    position: relative; 
    top: 21px; 
} 
.categories .special{ 
    top: 14px; 
} 
.categories div span{ 
    font-weight: bold; 
    color: white; 
    font-size: 13px; 
    text-align: left; 
    line-height: 16px; 
}

それは次のように探しています：https://imgur.com/a/iZOF5
そして、私はそれがこのように見える必要があります。https://imgur.com/a/SAQ5O
どれオーバーフローが動作しない、次の写真は、厳密な高さを持っています、ウィンドウのサイズに合わせて調整する必要があります。
問題がどこにあるか誰かが知りますか？ソリューションをありがとう。あなたがこのカテゴリに応じてクラスを更新する必要が

出典

2017-12-12 Jiří Přemyslovský

この質問の本文にコード*をテキスト*として追加してください。それは[mcve]でなければなりません。 – Lexi

ディスプレイを使用する：アイコンコンテナのフレックスとフレックス：1;あなたのアイコンオプションで。 –

：

.categories{ 
    min-height: 230px; 
    height: 100%; 
    background-color: #13bcca; 
    position: relative; 
    overflow: auto; 
    width: 100%; 
}

は、width属性を指定します。

表示属性などを変更する必要はありません。コンテナの幅を更新するだけで済みます。しかし、コンテナクラスを1つしか持たないことをお勧めします。そのようなコードを読むのは難しいです（おそらく1つのコードブロックに5つのネストされたdivを持つ必要はないでしょう）。

出典

2017-12-12 21:33:35 MadMatt

ウィンドウのサイズを変更してdivの高さが調整されない

答えて

関連する問題