当出现垂直滚动条并且没有出现滚动条时，对视口使用相同的宽度

时间：2017-06-26 18:11:33

标签： html css twitter-bootstrap

我有以下引导选项卡，此处“活动”选项卡内容小于视图端口，“待审核”选项卡内容多于视图端口，因此显示垂直滚动条。这里我的问题是，当我切换选项卡时，我看到一个混蛋。因为垂直滚动条没有出现在第一个选项卡上，因为它的内容小于视图端口并占据滚动条空间。我想防止这个混蛋，但我无法阻止。当滚动条出现时以及滚动条没有出现时，这可能具有相同的宽度吗？

.manage-rfq-row-one {
  margin-top: 1.786rem;
}

 1. 

.manage-rfq-title>h1 {
  margin: 0;
  font-size: 2.429rem;
  font-family: "Montserrat";
  color: #393E41;
}

.manage-rfq-menu {
  margin: 2.5rem 0 0.7143rem;
  border-bottom: 2px solid #ddd;
}

.manage-rfq-menu>li>a {
  font-size: 1rem;
  font-family: "Montserrat";
  color: #383D40;
  padding: 10px 30px;
  border: 2px solid transparent;
}

.manage-rfq-menu>li:first-child>a {
  /*padding-left: 0px;*/
}

.manage-rfq-menu>li>a span {
  background-color: #C7CACC;
}

.manage-rfq-menu>li.active>a span {
  background-color: #ffcc29;
}

.manage-rfq-menu>li>a span .notification-count {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

.manage-rfq-menu>li.active>a,
.manage-rfq-menu>li.active>a:focus,
.manage-rfq-menu>li.active>a:hover {
  color: #000;
  background-color: #fff;
  border: 2px solid #ddd;
  border-bottom-color: transparent;
}

.manage-rfq-menu>li {
  margin-bottom: -2px;
}

.manage-rfq-menu>li>a:hover {
  background-color: transparent;
  border-color: transparent;
}

.manage-rfq-tbl {
  border: 1px solid #ccc;
  margin-bottom: 5px;
}

.manage-rfq-tbl>thead>tr>th {
  color: #7C7D7E;
  font-size: 0.85rem;
}

.manage-rfq-tbl>thead>tr>th:first-child {
  padding-left: 1.786rem;
}

.manage-rfq-tbl>tbody>tr>td {
  font-size: 1.071rem;
  font-family: 'montserrat';
  vertical-align: middle;
}

.manage-product-notification {
  min-width: 20px;
  min-height: 20px;
  position: relative;
  display: inline-block;
  color: #65686A;
  font-family: 'Lato';
  border-radius: 50%;
  font-weight: bold;
  font-size: 0.7143rem;
  vertical-align: bottom;
}

.manage-rfq-tbl>tbody>tr>td.mnage-prduct-title {
  width: 26%;
  padding-left: 1.786rem;
  padding-top: 1.429rem;
  padding-bottom: 1.429rem;
}

.mnage-prduct-img-wrap,
.posted-on-rfq {
  width: 26%;
}

.expiry-date {
  width: 19%;
}

.mnage-ur-prducts {
  width: 29%;
}

.mnage-prduct-img {
  width: 10.14rem;
  height: 10.14rem;
  padding-top: 1.571rem;
  padding-bottom: 1.571rem;
}

.mnage-prduct-img>img {
  width: 10.14rem;
  height: 10.14rem;
  border: 1px solid #ccc;
}

.manage-rfq-tbl>tbody>tr>td.mnage-ur-prducts i {
  color: #B8C0C5;
  padding-right: 0.3571rem;
}

.manage-rfq-tbl>tbody>tr>td.mnage-ur-prducts a {
  padding-right: 2.143rem;
}

[data-ttip] {
  position: relative;
}

[data-ttip]:hover:before {
  content: attr(data-ttip);
  position: absolute;
  margin: 0;
  bottom: 28px;
  left: -6.143rem;
  min-width: 16.29rem;
  background-color: #F7FBFC;
  font-size: 0.9286rem;
  font-family: "Montserrat";
  color: #6B6E70;
  padding: 10px;
  border-radius: 2px;
}

.mnage-prduct-resume>a[data-ttip]:hover:before {
  left: -4.143rem;
}

[data-ttip]:hover:after {
  content: '';
  position: absolute;
  border-top: 11px solid #F7FBFC;
  border-right: 11px solid transparent;
  border-left: 11px solid transparent;
  bottom: 18px;
  left: 10px;
}

.mnage-prduct-resume>a[data-ttip]:hover:after {
  left: 40px;
}

.mnage-ur-prducts i {
  color: #686868 !important;
}

.mnage-rfq-search-box {
  margin-top: 0.2857rem;
  width: 15.86rem;
}
<script src="https://use.fontawesome.com/aacdcb9275.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row manage-rfq-row-two">
  <div class="col-sm-12">
    <ul class="nav nav-tabs manage-rfq-menu">
      <li class="active"><a data-toggle="tab" href="#home">ACTIVE <span class="manage-product-notification"><span class="notification-count">7</span></span></a></li>
      <li><a data-toggle="tab" href="#menu1">PENDING REVIEW <span class="manage-product-notification"><span class="notification-count">77</span></span></a></li>
      <li class="pointer"></li>
    </ul>

    <div class="tab-content">
      <div id="home" class="tab-pane fade in active">
        <table class="table manage-rfq-tbl">
          <thead>
            <tr>
              <th>TITLE</th>
              <th>POSTED / EDITED ON</th>
              <th>EXPIRY</th>
              <th>ACTION</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
      </div>
      <div id="menu1" class="tab-pane fade">
        <table class="table manage-rfq-tbl">
          <thead>
            <tr>
              <th>TITLE</th>
              <th>POSTED / EDITED ON</th>
              <th>EXPIRY</th>
              <th>ACTION</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="mnage-prduct-title">Paper Machine</td>
              <td class="posted-on-rfq">Mar 27, 2017</td>
              <td class="expiry-date">Apr 1, 2019</td>
              <td class="mnage-ur-prducts">
                <span class="mnage-prduct-edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> <a href="#" class="link">Edit</a></span>
                <!-- <span class="mnage-prduct-pause"><i class="fa fa-pause-circle-o" aria-hidden="true"></i> <a href="#" class="link" data-ttip="Click to stop showing this product on your company profile.">Pause</a></span>
                          <span class="mnage-prduct-resume"><i class="fa fa-play-circle-o" aria-hidden="true"></i> <a href="#" class="link" data-ttip="Click to again start displaying this product on your company profile.">Resume Display</a></span> -->
                <span><i class="fa fa-trash" aria-hidden="true"></i> <a href="#" class="link">Delete</a></ABBR></span></td>
            </tr>
            <tr>
              <td class="mnage-prduct-title">Kraft Paper Rolls</td>
              <td class="posted-on-rfq">Feb 2, 2016</td>
              <td class="expiry-date">Mar 7, 2019</td>
              <td class="mnage-ur-prducts">
                <span class="mnage-prduct-edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> <a href="#" class="link">Edit</a></span>
                <!-- <span class="mnage-prduct-pause"><i class="fa fa-pause-circle-o" aria-hidden="true"></i> <a href="#" class="link" data-ttip="Click to stop showing this product on your company profile.">Pause</a></span>
                          <span class="mnage-prduct-resume"><i class="fa fa-play-circle-o" aria-hidden="true"></i> <a href="#" class="link" data-ttip="Click to again start displaying this product on your company profile.">Resume Display</a></span> -->
                <span><i class="fa fa-trash" aria-hidden="true"></i> <a href="#" class="link">Delete</a></ABBR></span></td>
            </tr>
            <tr>
              <td class="mnage-prduct-title">Paper Machine</td>
              <td class="posted-on-rfq">Mar 27, 2017</td>
              <td class="expiry-date">Mar 27, 2018</td>
              <td class="mnage-ur-prducts">
                <span class="mnage-prduct-edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> <a href="#" class="link">Edit</a></span>
                <span><i class="fa fa-trash" aria-hidden="true"></i> <a href="#" class="link">Delete</a></ABBR></span></td>
            </tr>
            <tr>
              <td class="mnage-prduct-title">Paper Machine</td>
              <td class="posted-on-rfq">Mar 27, 2017</td>
              <td class="expiry-date">Mar 27, 2018</td>
              <td class="mnage-ur-prducts">
                <span class="mnage-prduct-edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> <a href="#" class="link">Edit</a></span>
                <span><i class="fa fa-trash" aria-hidden="true"></i> <a href="#" class="link">Delete</a></ABBR></span></td>
            </tr>
            <tr>
              <td class="mnage-prduct-title">Paper Machine</td>
              <td class="posted-on-rfq">Mar 27, 2017</td>
              <td class="expiry-date">Mar 27, 2018</td>
              <td class="mnage-ur-prducts">
                <span class="mnage-prduct-edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> <a href="#" class="link">Edit</a></span>
                <span><i class="fa fa-trash" aria-hidden="true"></i> <a href="#" class="link">Delete</a></ABBR></span></td>
            </tr>
            <tr>
              <td class="mnage-prduct-title">Paper Machine</td>
              <td class="posted-on-rfq">Mar 27, 2017</td>
              <td class="expiry-date">Mar 27, 2018</td>
              <td class="mnage-ur-prducts">
                <span class="mnage-prduct-edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> <a href="#" class="link">Edit</a></span>
                <span><i class="fa fa-trash" aria-hidden="true"></i> <a href="#" class="link">Delete</a></ABBR></span></td>
            </tr>
            <tr>
              <td class="mnage-prduct-title">Paper Machine</td>
              <td class="posted-on-rfq">Mar 27, 2017</td>
              <td class="expiry-date">Mar 27, 2018</td>
              <td class="mnage-ur-prducts">
                <span class="mnage-prduct-edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> <a href="#" class="link">Edit</a></span>
                <span><i class="fa fa-trash" aria-hidden="true"></i> <a href="#" class="link">Delete</a></ABBR></span></td>
            </tr>
            <tr>
              <td class="mnage-prduct-title">Paper Machine</td>
              <td class="posted-on-rfq">Mar 27, 2017</td>
              <td class="expiry-date">Mar 27, 2018</td>
              <td class="mnage-ur-prducts">
                <span class="mnage-prduct-edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> <a href="#" class="link">Edit</a></span>
                <span><i class="fa fa-trash" aria-hidden="true"></i> <a href="#" class="link">Delete</a></ABBR></span></td>
            </tr>
          </tbody>
        </table>
      </div>

1 个答案:

答案 0 :(得分：0)

经过一些研究，我发现我们可以通过为html元素添加“overflow-y：scroll”属性来阻止这种情况。

相关问题
最新问题