0
似乎是頁腳和主體之間的間隙體和頁腳之間的差距。我希望身體觸摸頁腳，就像我希望它完全填滿中間的空間一樣。我不能修復
@charset "utf-8";
/* CSS Document */
body {
font-family: 'Droid Sans', sans-serif;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
min-height: 100%;
}
.div_top1 {
height: 30px;
margin: 0 auto;
width: 100%;
border-bottom: 1px solid #FFF;
background-color: #2d2d2d;
}
.div_top2 {
height: 150px;
width: 100%;
background-color: #072135;
}
.main_container {
width: 100%;
margin: 0 auto;
background-color: #FFF;
overflow: auto;
min-height: 100%;
display: inline-block;
}
.container_right {
height: 100%;
padding-left: 20px;
margin: 0 auto;
}
.container_left {
float: left;
text-align: left;
border-right: 2px solid #5a5c5d;
border-bottom: 1px solid #5a5c5d;
height: 100%;
overflow: hidden;
}
.bk {
border-top: 4px solid #da6161;
display: table;
height: 200px;
margin: 0 auto;
margin-top: 30px;
padding: 8px;
}
.icon {
float: left;
display: block;
}
.icon-bar {
width: 70px;
/* Set a specific width */
background-color: #FFF;
/* Dark-grey background */
height: 100%;
}
.icon-bar a {
display: block;
/* Make the links appear below each other instead of side-by-side */
text-align: center;
/* Center-align text */
padding: 16px;
/* Add some padding */
transition: all 0.3s ease;
/* Add transition for hover effects */
color: black;
/* White text color */
font-size: 27px;
/* Increased font-size */
height: 100%;
}
.icon-bar a:hover {
background-color: #5a5c5d;
/* Add a hover color */
}
.active {
background-color: #818384;
/* Add an active/current color */
}
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
/* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: auto;
background-color: #da6161;
color: #fff;
text-align: center;
padding: 5px;
border-radius: 6px;
font-size: 20px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
margin-left: 36px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
.foot {
background-color: #2d2d2d;
position: absolute;
color: #FFF;
text-align: center;
left: 0;
bottom: 0;
height: 35px;
width: 100%;
border-top: 3px solid #9c9d9e;
padding-top: 3px;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div class="div_top2"> </div>
<div class="main_container">
<div class="container_left">
<div class="icon_menu">
<div class="icon-bar">
<a class="active tooltip" href="#">
<span class="tooltiptext">Home</span>
<i class="fa fa-home"></i>
</a>
<a class="tooltip" href="#">
<span class="tooltiptext">My Story</span>
<i class="fa fa-black-tie"></i>
</a>
<a href="#" class="tooltip">
<span class="tooltiptext">Companies</span>
<i class="fa fa-building"></i>
</a>
<a href="#" class="tooltip">
<span class="tooltiptext">Blog</span>
<i class="fa fa-paper-plane"></i>
</a>
<a href="#" class="tooltip">
<span class="tooltiptext">Ask Me Anything</span>
<i class="fa fa-quora"></i>
</a>
<a href="#" class="tooltip">
<span class="tooltiptext">Contact</span>
<i class="fa fa-address-card"></i>
</a>
</div>
</div>
</div>
<div class="container_right">
<div class="bk"></div>
</div>
</div>
<div class="foot">
Copyright 2017
</div>
後的完整代碼，請。我們需要足夠的代碼來重現問題。瞭解如何創建[MCVE] –
發佈的所有代碼 – xsami
告訴我們所有的烏爾碼 –