脚和

脚和

关注
发信
关注(28)粉丝(399)

css - 我无法修复脚和脚之间的空隙

页脚和主体之间似乎存在间隙。我希望身体触及页脚，如图所示，我希望它完全填满中间的空间。

https://ibb.co/dUpFJF



@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>

最佳答案

使用浮子时，会干扰正常的文档流程。更改.foot的定义，如下所示：



@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;
  color: #FFF;
  text-align: center;
  float: left;
  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>

关于css - 我无法修复脚和脚之间的空隙，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44402927/

10-09 13:55
Powered by LMLPHP ©2024 脚和 0.034519