1. 홈
  2. 질의 응답
  3. 창의 크기를 조정하여 div의 높이가 조정되지 않습니다.

창의 크기를 조정하여 div의 높이가 조정되지 않습니다.

2017-12-12 61 views
-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 : https://imgur.com/a/iZOF5
을 그리고 나는 그것을 다음과 같이해야합니다 :

.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/SAQ5O
는 모든 오버 플로우가 작동하지 않습니다, 두 번째 사진은 엄격한 높이가, 창 크기에 따라 조정이 필요합니다.
누가 문제가 있는지 아는 사람이 있습니까? 솔루션을 가져 주셔서 감사합니다.

출처

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

+0

텍스트 *를이 질문 본문에 추가하십시오. 그것은 [mcve]이어야합니다. – Lexi

+0

디스플레이 사용 : 아이콘 컨테이너의 플렉스 및 플렉스 : 1; 귀하의 아이콘 옵션에. –

답변

0

는이에 따라 카테고리 클래스를 업데이트해야합니다

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

너비 속성을 지정합니다.

디스플레이 속성이나 뭔가를 변경할 필요가 없습니다, 당신은 단지 컨테이너의 폭을 업데이트해야합니다. 그러나 단 하나의 컨테이너 클래스 만 사용하고 "div"지옥은 피하십시오. - 그런 코드를 읽는 것은 정말 어렵습니다. 한 블록의 코드에서 5 개의 중첩 된 div를 가질 필요는 없습니다.

출처

2017-12-12 21:33:35 MadMatt

 관련 문제

  • 관련 문제 없음^_^