手風琴不會使頁面不再

我使用像這樣的手風琴： enter image description here 手風琴不會使頁面不再

的HTML如下：

<div id="cal-container"> 
     <div id="cal-side"> 
      <div class="accordion" id="accordion2"> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> 
         <a class="accordion-toggle project-header" data-toggle="collapse" data-parent="#accordion2" href="#project-list">Projects 
         </a> 
        </div> 
        <div id="project-list" class="accordion-body collapse"> 
         <div class="accordion-inner"> 
          <div class="event-container project-container"> 
          </div> 

         </div> 
        </div> 
       </div> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> 
         <a class="accordion-toggle task-header" data-toggle="collapse" data-parent="#accordion2" href="#task-list">Tasks 
         </a> 
        </div> 
        <div id="task-list" class="accordion-body collapse"> 
         <div class="accordion-inner"> 
          <div class="event-container task-container"> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> 
         <a class="accordion-toggle case-header" data-toggle="collapse" data-parent="#accordion2" href="#case-list">Cases 
         </a> 
        </div> 
        <div id="case-list" class="accordion-body collapse"> 
         <div class="accordion-inner"> 
          <div class="event-container case-container"> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 

     </div> 

     <div id="cal"> 
      <div id='calendar'> 
      </div> 
     </div> 
    </div>

的CSS是這樣的：

 .calendar 
     { 
      margin:16px; 
      border-collapse:separate !important; 
       -webkit-border-radius: 7px; 
      border-radius: 7px; 
      border-spacing:0; 
     } 

     .cal-container 
     { 
      margin-left:auto; 
      margin-right:auto; 
      display: table; 
      width:100%; 
     } 

    #cal-side 
    { 
     float:right; 
     height:100%; 
     width:200px; 
     margin:50px 5px 5px 5px; 
    } 

    #cal-container 
    { 
     width:100%; 
    } 

    .top-link 
    { 
     display:inline-block; 
    } 

    .accordion-inner 
    { 
     padding:2px 2px !important; 
    } 

#cal{ 
    overflow:hidden; 
}

的問題是當我有太多事件時，該頁面不會在內容的底部顯示。

我懷疑這會導致它的風格：

#cal{ 
     overflow:hidden; 
    }

沒有它，它滾動到底部，但隨後的日曆進入底部太...

我需要一種方式它看起來像我的形象，但頁面的底部應該在底部。事件不應該穿透它。

我要爲項目的滾動條，如果他們得到比母大DIV/CAL-側

感謝

enter image description here

來源

2013-04-08 jmasterx

嘗試向'＃cal-side'添加'overflow：hidden'。我猜這是一個未清理的浮點數。 – bfavaretto 2013-04-08 20:20:43

@Milo我猜想這是一個浮動，但你能告訴我們應用的CSS是什麼嗎？您可以使用所選瀏覽器中的開發人員工具查看應用的CSS，這樣我們可以實際看到應用於正在處理的元素的內容。 – Justin 2013-04-08 20:22:27

嘗試增加height: auto到包含元素。

來源

2013-04-08 20:29:02 colecmc

什麼是包含元素？ – jmasterx 2013-04-08 20:30:50

很難說，嘗試你的開發工具。你可以在http://jsfiddle.net上發佈一個例子嗎？ 'height：auto'和'overflow：hidden'常常修復這樣的問題。 – colecmc 2013-04-08 20:34:32

你爲什麼不說手風琴組設置爲overflow:auto爲了在必要時引起滾動條？我認爲這看起來更加精美。

UPDATE

#case-list { 
    overflow:auto; 
}

來源

2013-04-08 20:21:14 js1568

你能告訴我我該怎麼做？ – jmasterx 2013-04-08 20:22:49

添加CSS樣式是'＃案例list'或'。病例-container'，無論是對手風琴塊容器。 – js1568 2013-04-08 20:27:30

不幸的是，兩人都沒有工作。 – jmasterx 2013-04-08 20:32:21

上述答案的替代。代碼僅用於說明。

<div id="calendar"> 
    <div id="calside-back"> 
    </div> 
    <div id="calside-front"> 
    </div> 
    </div>

CSS

#calendar { 
    width: 100%; 
    height: 70%; 
    position: relative; 
} 

#calside-back { 
    width: 40%; 
    height: 100%; 
    float: right; 
} 

#calside-front { 
    width: 40%; 
    height: 150%; 
    position: absolute; 
    right: 0; 
}

的calside前期元素是絕對所以會溢出它的父元素和calside回元素將「儲備」的父空間，以便日曆不會藏在Calside-front後面。

如果calside前期的增長比頁高那麼頁面滾動條就會出現。

演示here

來源

2013-04-08 20:43:21 Bruno

手風琴不會使頁面不再

回答

相關問題