扩大div的高度

我有以下一组8盒。我的问题在于我已经包含在代码片段中的(min-width: 840px) and (max-width:960px)的视口代码中。请在该视口中查看它。您会看到这些框将变为4列2列。当您将鼠标悬停在方框上时，您会看到方框移到下一行或方框下方有间隙。我无法弄清楚当它悬停在一个盒子上时，如何使盒子的高度与悬挂盒子的高度一致，因此它与盒子的高度相匹配，所以盒子不会被推下。扩大div的高度

我该怎么做？

.blue-box-container { 
 
\t position: relative; 
 
\t width: 100%; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t /*height: 800px;*/ 
 
\t height: 100%; 
 
} 
 
.dark-blue-box, .light-blue-box { 
 
\t height: 50%; 
 
\t width: 25%; 
 
\t display: inline-block; 
 
\t vertical-align: top; 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t transition: all .8s ease-in-out; 
 
} 
 
.dark-blue-box{ 
 
\t background-color: #45a5ba; 
 
} 
 
.light-blue-box { 
 
\t background-color: #8fc9d6; 
 
} 
 
.dark-blue-box:hover, .light-blue-box:hover { 
 
\t background-color: #a10085; 
 
\t cursor: pointer; 
 
} 
 
.dark-blue-box:hover .insideBoxWrap, .light-blue-box:hover .insideBoxWrap { 
 
\t padding: 8% 12%; 
 
} 
 
.dark-blue-box:hover .home-icon img, .light-blue-box:hover .home-icon img { 
 
\t height: 86px; 
 
\t width: 86px; 
 
} \t 
 
.dark-blue-box:hover .box-title, .light-blue-box:hover .box-title { 
 
\t color: #FFF; 
 
} 
 
.dark-blue-box:hover .box-description, .light-blue-box:hover .box-description { 
 
\t display: none; 
 
} 
 
.dark-blue-box:hover .box-description-hover, .light-blue-box:hover .box-description-hover { 
 
\t display: block; 
 
\t color: #FFF; 
 
\t font-size: 1.5em; 
 
\t padding-top: 20px; 
 
} 
 
.insideBoxWrap { 
 
\t /*padding: 150px 18%;*/ 
 
\t padding: 30% 18%; 
 
} 
 
.box-title { 
 
\t color: #307382; 
 
\t font-size: 3em; 
 
} 
 
.box-description { 
 
\t padding-top: 15px; 
 
\t color: #307382; 
 
\t font-size: 1.6em; 
 
} 
 
.box-description-hover { 
 
\t display: none; 
 
} 
 
.dark-blue-box:nth-child(5), .dark-blue-box:nth-child(7){ 
 
\t background-color: #8fc9d6; 
 
} 
 
.dark-blue-box:nth-child(5):hover, .dark-blue-box:nth-child(7):hover{ 
 
\t background-color: #a10085; 
 
} 
 
.light-blue-box:nth-child(6), .light-blue-box:nth-child(8){ 
 
\t background-color: #45a5ba; 
 
} 
 
.light-blue-box:nth-child(6):hover, .light-blue-box:nth-child(8):hover{ 
 
\t background-color: #a10085; 
 
} 
 

 

 
@media screen and (min-width: 840px) and (max-width:960px) { 
 

 
.blue-box-container { 
 
\t width: 100%; 
 
\t height: auto; 
 
} 
 
.dark-blue-box, .light-blue-box { 
 
\t height: 33%; 
 
\t width: 50%; 
 
\t display: inline-block; 
 
} 
 
.dark-blue-box:hover .box-description-hover, .light-blue-box:hover .box-description-hover { 
 
\t display: block; 
 
\t font-size: 1.1em; 
 
\t padding-top: 10px; 
 
} 
 
.dark-blue-box:hover .box-description-hover, .light-blue-box:hover .box-description-hover { 
 
\t display: block; 
 
\t font-size: 1.1em; 
 
\t padding-top: 3%; 
 
\t clear: both; 
 
} 
 
.dark-blue-box:hover .insideBoxWrap, .light-blue-box:hover .insideBoxWrap { 
 
\t padding: 3% 6%; 
 
} 
 
.dark-blue-box:hover .box-title, .light-blue-box:hover .box-title { 
 
\t padding-top: 7%; 
 
} 
 
.dark-blue-box:nth-child(3){ 
 
\t background-color: #8fc9d6; 
 
} 
 
.light-blue-box:nth-child(4){ 
 
\t background-color: #45a5ba; 
 
} 
 
.dark-blue-box:nth-child(3):hover, .light-blue-box:nth-child(4):hover{ 
 
\t background-color: purple; 
 
} \t 
 
.dark-blue-box:nth-child(5){ 
 
\t background-color: #45a5ba; 
 
} 
 
.light-blue-box:nth-child(6){ 
 
\t background-color: #8fc9d6; 
 
} 
 
.insideBoxWrap { 
 
\t padding: 10% 30px; 
 
} 
 
.box-title { 
 
\t font-size: 2em; 
 
} 
 
.box-description { 
 
\t padding-top: 5px; 
 
\t font-size: 1.1em; 
 
} 
 
    }

<div class="blue-box-container"><div class="dark-blue-box fadeBlock"> 
 
\t \t \t <div class="insideBoxWrap"> 
 
\t \t \t \t <div class="home-icon"><img src="/icons/screen6.png" alt=""></div> 
 
\t \t \t \t <div class="box-title">Brand Strategy</div> 
 
\t \t \t \t <div class="box-description">Digital Roadmap</div> 
 
\t \t \t \t <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs 
 
\t \t \t \t fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div> 
 
\t \t \t </div> 
 
\t \t \t </div><div class="light-blue-box fadeBlock"> 
 
\t \t \t <div class="insideBoxWrap"> 
 
\t \t \t \t <div class="home-icon"><img src="/icons/web2.png" alt=""></div> 
 
\t \t \t \t <div class="box-title">Development</div> 
 
\t \t \t \t <div class="box-description">That Outperforms</div> 
 
\t \t \t \t <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs 
 
\t \t \t \t fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div> 
 
\t \t \t </div> 
 
\t \t \t </div><div class="dark-blue-box fadeBlock"> 
 
\t \t \t <div class="insideBoxWrap"> 
 
\t \t \t \t <div class="home-icon"><img src="/icons/tie13.png" alt=""></div> 
 
\t \t \t \t <div class="box-title">Visual Identity</div> 
 
\t \t \t \t <div class="box-description">That Is Timeless</div> 
 
\t \t \t \t <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs 
 
\t \t \t \t fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div> 
 
\t \t \t </div> 
 
\t \t \t </div><div class="light-blue-box fadeBlock"> 
 
\t \t \t <div class="insideBoxWrap"> 
 
\t \t \t \t <div class="home-icon"><img src="/icons/hand256.png" alt=""></div> 
 
\t \t \t \t <div class="box-title">Interactivity</div> 
 
\t \t \t \t <div class="box-description">For Engagement</div> 
 
\t \t \t \t <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs 
 
\t \t \t \t fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div> 
 
\t \t \t </div> 
 
\t \t \t </div><div class="dark-blue-box fadeBlock"> 
 
\t \t \t <div class="insideBoxWrap"> 
 
\t \t \t \t <div class="home-icon"><img src="/icons/windows10.png" alt=""></div> 
 
\t \t \t \t <div class="box-title">Responsive</div> 
 
\t \t \t \t <div class="box-description">Web Layout</div> 
 
\t \t \t \t <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs 
 
\t \t \t \t fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div> 
 
\t \t \t </div> 
 
\t \t \t </div><div class="light-blue-box fadeBlock"> 
 
\t \t \t <div class="insideBoxWrap"> 
 
\t \t \t \t <div class="home-icon"><img src="/icons/gear49.png" alt=""></div> 
 
\t \t \t \t <div class="box-title">Ecommerce</div> 
 
\t \t \t \t <div class="box-description">Conversion Focused</div> 
 
\t \t \t \t <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs 
 
\t \t \t \t fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div> 
 
\t \t \t </div> 
 
\t \t \t </div><div class="dark-blue-box fadeBlock"> 
 
\t \t \t <div class="insideBoxWrap"> 
 
\t \t \t \t <div class="home-icon"><img src="/icons/news1.png" alt=""></div> 
 
\t \t \t \t <div class="box-title">Dynamic</div> 
 
\t \t \t \t <div class="box-description">Functionality</div> 
 
\t \t \t \t <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs 
 
\t \t \t \t fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div> 
 
\t \t \t </div> 
 
\t \t \t </div><div class="light-blue-box fadeBlock"> 
 
\t \t \t <div class="insideBoxWrap"> 
 
\t \t \t \t <div class="home-icon"><img src="/icons/conversion.png" alt=""></div> 
 
\t \t \t \t <div class="box-title">Conversion</div> 
 
\t \t \t \t <div class="box-description">Increase Results</div> 
 
\t \t \t \t <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs 
 
\t \t \t \t fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div> 
 
\t \t \t </div> 
 
\t \t \t </div> 
 
\t </div>

来源

2016-03-07 Paul

，因为你是在悬停箱增加填充需要额外的空间，然后，因为没有足够的空间它适合在 –

@Reddy右另一个向下移动，但无论如何要调整其他箱子，当这种情况发生？ – Paul

我认为你在 –

您可以使用display:flex和min-height代替height。

.blue-box-container { 
 
    position: relative; 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    /*height: 800px;*/ 
 
    min-height: 100%; 
 
} 
 
.dark-blue-box, 
 
.light-blue-box { 
 
    min-height: 50%; 
 
    width: 25%; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    padding: 0; 
 
    margin: 0; 
 
    transition: all .8s ease-in-out; 
 
} 
 
.dark-blue-box { 
 
    background-color: #45a5ba; 
 
} 
 
.light-blue-box { 
 
    background-color: #8fc9d6; 
 
} 
 
.dark-blue-box:hover, 
 
.light-blue-box:hover { 
 
    background-color: #a10085; 
 
    cursor: pointer; 
 
} 
 
.dark-blue-box:hover .insideBoxWrap, 
 
.light-blue-box:hover .insideBoxWrap { 
 
    padding: 8% 12%; 
 
} 
 
.dark-blue-box:hover .home-icon img, 
 
.light-blue-box:hover .home-icon img { 
 
    height: 86px; 
 
    width: 86px; 
 
} 
 
.dark-blue-box:hover .box-title, 
 
.light-blue-box:hover .box-title { 
 
    color: #FFF; 
 
} 
 
.dark-blue-box:hover .box-description, 
 
.light-blue-box:hover .box-description { 
 
    display: none; 
 
} 
 
.dark-blue-box:hover .box-description-hover, 
 
.light-blue-box:hover .box-description-hover { 
 
    display: block; 
 
    color: #FFF; 
 
    font-size: 1.5em; 
 
    padding-top: 20px; 
 
} 
 
.insideBoxWrap { 
 
    /*padding: 150px 18%;*/ 
 
    padding: 30% 18%; 
 
} 
 
.box-title { 
 
    color: #307382; 
 
    font-size: 3em; 
 
} 
 
.box-description { 
 
    padding-top: 15px; 
 
    color: #307382; 
 
    font-size: 1.6em; 
 
} 
 
.box-description-hover { 
 
    display: none; 
 
} 
 
.dark-blue-box:nth-child(5), 
 
.dark-blue-box:nth-child(7) { 
 
    background-color: #8fc9d6; 
 
} 
 
.dark-blue-box:nth-child(5):hover, 
 
.dark-blue-box:nth-child(7):hover { 
 
    background-color: #a10085; 
 
} 
 
.light-blue-box:nth-child(6), 
 
.light-blue-box:nth-child(8) { 
 
    background-color: #45a5ba; 
 
} 
 
.light-blue-box:nth-child(6):hover, 
 
.light-blue-box:nth-child(8):hover { 
 
    background-color: #a10085; 
 
} 
 
@media screen and (min-width: 840px) and (max-width: 960px) { 
 
    .blue-box-container { 
 
    width: 100%; 
 
    height: auto; 
 
    } 
 
    .dark-blue-box, 
 
    .light-blue-box { 
 
    min-height: 33%; 
 
    width: 50%; 
 
    display: inline-block; 
 
    } 
 
    .dark-blue-box:hover .box-description-hover, 
 
    .light-blue-box:hover .box-description-hover { 
 
    display: block; 
 
    font-size: 1.1em; 
 
    padding-top: 10px; 
 
    } 
 
    .dark-blue-box:hover .box-description-hover, 
 
    .light-blue-box:hover .box-description-hover { 
 
    display: block; 
 
    font-size: 1.1em; 
 
    padding-top: 3%; 
 
    clear: both; 
 
    } 
 
    .dark-blue-box:hover .insideBoxWrap, 
 
    .light-blue-box:hover .insideBoxWrap { 
 
    padding: 3% 6%; 
 
    } 
 
    .dark-blue-box:hover .box-title, 
 
    .light-blue-box:hover .box-title { 
 
    padding-top: 7%; 
 
    } 
 
    .dark-blue-box:nth-child(3) { 
 
    background-color: #8fc9d6; 
 
    } 
 
    .light-blue-box:nth-child(4) { 
 
    background-color: #45a5ba; 
 
    } 
 
    .dark-blue-box:nth-child(3):hover, 
 
    .light-blue-box:nth-child(4):hover { 
 
    background-color: purple; 
 
    } 
 
    .dark-blue-box:nth-child(5) { 
 
    background-color: #45a5ba; 
 
    } 
 
    .light-blue-box:nth-child(6) { 
 
    background-color: #8fc9d6; 
 
    } 
 
    .insideBoxWrap { 
 
    padding: 10% 30px; 
 
    } 
 
    .box-title { 
 
    font-size: 2em; 
 
    } 
 
    .box-description { 
 
    padding-top: 5px; 
 
    font-size: 1.1em; 
 
    } 
 
}

<div class="blue-box-container"> 
 
    <div class="dark-blue-box fadeBlock"> 
 
    <div class="insideBoxWrap"> 
 
     <div class="home-icon"> 
 
     <img src="/icons/screen6.png" alt=""> 
 
     </div> 
 
     <div class="box-title">Brand Strategy</div> 
 
     <div class="box-description">Digital Roadmap</div> 
 
     <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div> 
 
    </div> 
 
    </div> 
 
    <div class="light-blue-box fadeBlock"> 
 
    <div class="insideBoxWrap"> 
 
     <div class="home-icon"> 
 
     <img src="/icons/web2.png" alt=""> 
 
     </div> 
 
     <div class="box-title">Development</div> 
 
     <div class="box-description">That Outperforms</div> 
 
     <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div> 
 
    </div> 
 
    </div> 
 
    <div class="dark-blue-box fadeBlock"> 
 
    <div class="insideBoxWrap"> 
 
     <div class="home-icon"> 
 
     <img src="/icons/tie13.png" alt=""> 
 
     </div> 
 
     <div class="box-title">Visual Identity</div> 
 
     <div class="box-description">That Is Timeless</div> 
 
     <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div> 
 
    </div> 
 
    </div> 
 
    <div class="light-blue-box fadeBlock"> 
 
    <div class="insideBoxWrap"> 
 
     <div class="home-icon"> 
 
     <img src="/icons/hand256.png" alt=""> 
 
     </div> 
 
     <div class="box-title">Interactivity</div> 
 
     <div class="box-description">For Engagement</div> 
 
     <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div> 
 
    </div> 
 
    </div> 
 
    <div class="dark-blue-box fadeBlock"> 
 
    <div class="insideBoxWrap"> 
 
     <div class="home-icon"> 
 
     <img src="/icons/windows10.png" alt=""> 
 
     </div> 
 
     <div class="box-title">Responsive</div> 
 
     <div class="box-description">Web Layout</div> 
 
     <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div> 
 
    </div> 
 
    </div> 
 
    <div class="light-blue-box fadeBlock"> 
 
    <div class="insideBoxWrap"> 
 
     <div class="home-icon"> 
 
     <img src="/icons/gear49.png" alt=""> 
 
     </div> 
 
     <div class="box-title">Ecommerce</div> 
 
     <div class="box-description">Conversion Focused</div> 
 
     <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div> 
 
    </div> 
 
    </div> 
 
    <div class="dark-blue-box fadeBlock"> 
 
    <div class="insideBoxWrap"> 
 
     <div class="home-icon"> 
 
     <img src="/icons/news1.png" alt=""> 
 
     </div> 
 
     <div class="box-title">Dynamic</div> 
 
     <div class="box-description">Functionality</div> 
 
     <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div> 
 
    </div> 
 
    </div> 
 
    <div class="light-blue-box fadeBlock"> 
 
    <div class="insideBoxWrap"> 
 
     <div class="home-icon"> 
 
     <img src="/icons/conversion.png" alt=""> 
 
     </div> 
 
     <div class="box-title">Conversion</div> 
 
     <div class="box-description">Increase Results</div> 
 
     <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div> 
 
    </div> 
 
    </div> 
 
</div>

来源

2016-03-07 15:56:27

以下得到了正确的答案你所做的全部是'display：flex; flex-wrap：wrap;'和'min-height：100％;'到'blue-box-container'？我试过这个，因为我没有看到其他任何不同的东西，它似乎不像你的那样工作。我在我的问题中添加了一张图片。 – Paul

@Paul在媒体查询中我把高度也变成了最小高度:) –

@Paul在1696行左右你没有把高度变成最小高度...... :(做完整的编辑/修改:)因为它看起来像你做的不是在媒体询问 –

扩大div的高度

回答

相关问题