Bootstrap下降到固定高度div内

时间：2017-03-15 04:28:13

标签： html css twitter-bootstrap css3

我在固定高度div内有一个带有可滚动内容(overflow-y: scroll;)的引导下拉菜单。我的问题是，当菜单变得更长时，它隐藏在其父div中，因为它具有垂直滚动条。我想显示它的完整大小（在其父级之上）。 z-index不适用于此。

.highlights-box {
  background-color: #f5f5f5;
  border: 1px solid #e0e0e0;
  font-size: 17px;
  font-family: camberia;
  padding-left: 0px;
  padding-right: 0px;
  margin-top: 7px;
}

.highlights-box h1 {
  font-family: camberia;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 24px;
  font-weight: normal;
}

.unesco {
  padding-top: 2px;
  padding-bottom: 2px;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  padding-left: 20px;
  font-size: 18px;
}

.city-heading {
  font-weight: bold;
  text-decoration: underline;
  text-align: center;
  padding-top: 7px;
  padding-bottom: 7px;
  text-transform: uppercase;
}

.monuments {
  height: 200px;
  overflow-y: scroll;
  padding-left: 10px;
  padding-right: 10px;
}

.monuments li {
  list-style: none;
  padding: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
}

.highlights-box .dropdown-menu {
  top: 66%;
  left: 100px;
  z-index:9999;
}
.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu li {
  padding: 0px;
}

.dropdown-menu li a:hover {
  font-size: 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-6 col-sm-6 col-xs-12 highlights-box">
  <h1>Tour Highlights</h1>
  <div class="unesco" style="border-bottom:none; padding-top:8px; padding-bottom:5px;">U = UNESCO World Heritage Site</div>
  <div class="unesco" style="border-top:none; padding-bottom:8px">E = Unique Experience</div>
  <div class="monuments" id="monuments">
    <div class="city-heading">
      <a id="Delhi"></a>
      <div class="city-heading dropdown dropdown-toggle"><span onclick="scrollDiv('Delhi',jQuery(this))">Delhi</span><span class="caret"></span>
        <ul class="dropdown-menu">
          <li onclick="scrollDiv('Varanasi',jQuery(this))"><a href="javascript:void(0)">Varanasi</a></li>
          <li onclick="scrollDiv('Agra',jQuery(this))"><a href="javascript:void(0)">Agra</a></li>
          <li onclick="scrollDiv('Abhaneri (Enroute)',jQuery(this))"><a href="javascript:void(0)">Abhaneri (Enroute)</a></li>
          <li onclick="scrollDiv('Ranthambore',jQuery(this))"><a href="javascript:void(0)">Ranthambore</a></li>
          <li onclick="scrollDiv('Jaipur',jQuery(this))"><a href="javascript:void(0)">Jaipur</a></li>
          <li onclick="scrollDiv('Ranakpur',jQuery(this))"><a href="javascript:void(0)">Ranakpur</a></li>
          <li onclick="scrollDiv('Udaipur',jQuery(this))"><a href="javascript:void(0)">Udaipur</a></li>
          <li onclick="scrollDiv('Mumbai',jQuery(this))"><a href="javascript:void(0)">Mumbai</a></li>
          <li onclick="scrollDiv('Aurangabad',jQuery(this))"><a href="javascript:void(0)">Aurangabad</a></li>
          <li onclick="scrollDiv('Cochin',jQuery(this))"><a href="javascript:void(0)">Cochin</a></li>
          <li onclick="scrollDiv('Backwaters',jQuery(this))"><a href="javascript:void(0)">Backwaters</a></li>
        </ul>
      </div>
    </div>
    <li>Qutab Minar - U</li>
    <li>Guided walk through ancient spice bazaar in Chandni Chowk - E</li>
    <li>Red Fort - U</li>
    <li>Rickshaw Ride in Old Delhi's Crowded Bazaar - E</li>
    <li>India Gate</li>
    <li>National Museum</li>
    <li>Humayun's Tomb - U</li>
    <li>Bangla Sahib Gurudwara - E</li>
    <li>Jama Masjid</li>

    <div class="city-heading">
      <a id="Varanasi"></a>Varanasi</div>
    <li>Sunset Arti prayer ceremony on the holy river - E</li>
    <li>Sunrise and Sunset boat cruises on the holy river - E</li>
    <li>Sarnath Archaelogical Museum*</li>

    <div class="city-heading">
      <a id="Agra"></a>Agra</div>
    <li>Agra Fort - U</li>
    <li>Taj Mahal (Both sunrise and sunset visits) - U</li>

    <div class="city-heading">
      <a id="Abhaneri (Enroute)"></a>Abhaneri (Enroute)</div>
    <li>Rajasthani Village Walk - E</li>
    <li>Chand Baori Stepwell</li>

    <div class="city-heading">
      <a id="Ranthambore"></a>Ranthambore</div>
    <li>Wildlife Safaris</li>
    <li>Ranthambore Fort</li>

    <div class="city-heading">
      <a id="Jaipur"></a>Jaipur</div>
    <li>Amber Fort and Palace - U</li>
    <li>Jantar Mantar - U</li>
    <li>City Palace</li>
    <li>Hawa Mahal (Palace of the Winds)</li>
    <li>Monkey Temple - E</li>
    <li>Elephant Ride to Amer Fort - E</li>
    <li>Camelback (or Camel cart) safari at Samode - E</li>
    <li>Rajasthani Lunch at Samode Palace</li>

    <div class="city-heading">
      <a id="Ranakpur"></a>Ranakpur</div>
    <li>15th Century Jain Temple</li>
    <li>Purebred Marwari Horse Ride - E</li>

    <div class="city-heading">
      <a id="Udaipur"></a>Udaipur</div>
    <li>City Palace</li>
    <li>Crystal Gallery</li>
    <li>Monsoon Palace Excursion - E</li>
    <li>Boat Cruise on Lake Pichola</li>
    <li>Three Wheeler (Tuk Tuk) ride through the streets of Udaipur - E</li>

    <div class="city-heading">
      <a id="Mumbai"></a>Mumbai</div>
    <li>The Gateway Of India</li>
    <li>Prince of Wales Museum</li>
    <li>The Victoria Terminus - U</li>
    <li>Drive on the Queen's Necklace (Marine Drive)</li>
    <li>Historic Flora Fountain and Fort area exploration</li>
    <li>Mumbai's Launderers - Old Traditional Dhobi Ghats - E</li>

    <div class="city-heading">
      <a id="Aurangabad"></a>Aurangabad</div>
    <li>Ajanta Caves - U</li>
    <li>Ellora Caves - U</li>

    <div class="city-heading">
      <a id="Cochin"></a>Cochin</div>
    <li>Cherai Island - E</li>
    <li>15th Century Synangogue</li>
    <li>St. Francis Church</li>
    <li>Chinese Fishing Nets</li>
    <li>Fort Kochi historic architecture</li>
    <li>Kathakali Dance Performance</li>
    <li>Dinner and cooking lesson with a famous Keralan chef - E</li>

    <div class="city-heading">
      <a id="Backwaters"></a>Backwaters</div>
    <li>Cruise through the idyllic backwaters - E</li>

  </div>
</div>

这是fiddle

1 个答案:

答案 0 :(得分：2)

问题是因为当位置绝对元素位于具有位置相对且溢出隐藏或滚动的父级内部时，它们将被其父级裁剪。

解决方案是将position: relative设置为指向绝对元素的父级，但在祖父元素上设置overflow（滚动或隐藏）！如下面的模式：

<div class="grand-parent">  => position: relative;  
  <div class="parent">      => overflow: hidden; (or scroll;)  
    <div class="child">     => position: absolute; 
    </div>
  </div>
</div>

在您的情况下，我们可以使用现有元素来执行此操作。

  • 添加位置：相对于作为我们的祖母的.highlights-box div。

  • 在overflow-y: scroll div上设置.monuments。这是中间父母。

  • 然后我们通过修改.dropdown类来覆盖位置：.city-heading的相对位置，使.city-heading成为普通（静态）位置元素。

样式更改如下：

.highlights-box {
  ...
  position: relative; /* !!EDIT!! ensure pos:relative of grand-parent */
}

.city-heading {
  ...
  position: static; /* override position:relative of .dropdown */
}

.highlights-box .dropdown-menu {
  top: 53%; /* better position than 66% */
  ...
}

这是updated fiddle.

相关问题
最新问题