div的高度不会通过调整窗口大小来调整

时间：2017-12-12 20:59:29

标签： html css height width

我编码school project website，我遇到了问题。当我调整浏览器的宽度时，子div从标题向下浮动，因此标题下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:obchod@gastronerez.cz" title="E-mail"><i 
class="fa fa-envelope-o" aria-hidden="true"></i>obchod@gastronerez.eu</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
任何溢出都不起作用，第二张图片有严格的高度，但我需要根据窗口的大小进行调整。
有谁知道问题出在哪里？感谢您的解决方案。

1 个答案:

答案 0 :(得分：0)

您需要根据此更新类别类：

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

指定width属性。

无需更改显示属性或其他内容，只需更新容器的宽度即可。但是，我建议您只有一个容器类，请避免使用＃34; div＆＃34;地狱 - 这个代码真的很难读（你可能不需要在一个代码块中有5个嵌套的div）。

相关问题
最新问题