DIV высота без изменения размера

Привет У меня есть контейнер div для страницы (называемый innercontent), и внутри этого я имею div, называемый tabs2. Tabs2 содержит вкладку навигации, которая позволяет содержимое внутри div (внутри tab2) изменять. Содержимое внутри div меняется, поэтому высота должна расширяться, если в этом div содержится много контента. Проблема заключается в том, что при изменении вкладок в области содержимого div автоматически не изменяет размер, поэтому содержимое не видно. Вот код:DIV высота без изменения размера

CSS:

.innercontent { 
    overflow: hidden; 
    background-color:#FFF; 
    padding:24px 30px; 
    border-radius:5px; 
} 

#tabs2 { 
    width: 100%; 
    height:100%; 
} 

.div2 { 
    position: absolute; 
    visibility: hidden; 
    width: 100%; 
    left: 0; 
}

HTML:

<div id="tabs2"> 
    <ul> 
     <li id="One"><a href="#One" id="first">One</a> 
      <div class="div2"> 
       <p>Insert content here</p> 
      </div> 
     </li> 
     <li id="Two"><a href="#Two" id="sec">Two</a> 
      <div class="div2"> 
       <p>Insert content here</p> 
      </div> 
     </li> 
     <li id="Three"><a href="#Three" id="third">Three</a> 
      <div class="div2"> 
       <p>Insert content here</p> 
      </div> 
     </li> 
    </ul> 
</div>

источник

2013-07-13 Matt9Atkins

Ваши области контента позиционируются абсолютно. Поэтому они выходят за рамки модели коробки, поэтому это не работает. Вы можете либо взглянуть на создание функции javascript, которая при изменении вкладок будет соответствовать правильной высоте или посмотреть на изменение ваших стилей, чтобы они не полагались на абсолютное позиционирование. – TommyBs

Они должны быть абсолютными, как и для каждой нажатой вкладки. – Matt9Atkins

Вы уверены, что они должны быть абсолютными? Поскольку я не думаю, что они должны быть. Вы могли бы использовать что-то вроде jqueryui. http://jqueryui.com/tabs/

В качестве альтернативы, измените свой html, и это должно быть проще. Возможен перемещение разделов содержимого за пределами, но атрибут данных который связывает их с определенной ссылкой. Я предполагаю, что вы используете некоторые js на данный момент, чтобы манипулировать показом и скрытием, поскольку в настоящее время у вас есть видимость: скрытый. Я изменил это для отображения: нет в моем примере (поскольку видимость все еще занимает место в документе. Когда пользователь нажимает на ссылку, скрыть все div по умолчанию, а затем показать тот, у которого есть соответствующий соответствующий атрибут данных.

Я создал скрипку в http://jsfiddle.net/9bH7s/, который показывает это и код ниже.

HTML

<div class="innercontent"> 
<div id="tabs2"> 
<ul> 
    <li id="One"><a href="#One" id="first">One</a> 

    </li> 
    <li id="Two"><a href="#Two" id="sec">Two</a> 

    </li> 
    <li id="Three"><a href="#Three" id="third">Three</a> 

    </li> 
</ul> 
<div class="div2" data-id="first"> 
      <p>Insert content here</p> 
     </div> 
    <div class="div2" data-id="sec"> 
      <p>Insert content here</p> 
     </div> 
     <div class="div2" data-id="third"> 
      <p>Insert content here this has a lot more <br /><br />and some more content</p> 
     </div> 
</div> 
</div>

CSS

.innercontent { 
overflow: hidden; 
background-color:#efefef; 
padding:24px 30px; 
border-radius:5px; 
} 

#tabs2 { 
width: 100%; 
height:100%; 
} 
#tabs2 ul li{ 
float:left; 
list-style:none; 
margin-left:10px; 
} 


.div2 { 
display:none; 
width: 100%; 
clear:both; 
}

$('#tabs2').delegate('a','click',function(){ 
$('.div2').hide(); 
$('.div2[data-id=' + this.id +']').show(); 

});

источник

2013-07-13 13:45:54 TommyBs

Im not используя любой JS, и, честно говоря, я хотел держаться подальше от него – Matt9Atkins

первое изменение :: Dont указать любую высоту для .tab2..it будет принимать автоматическую высоту, соответствующую пункту, что он содержит

2-ое изменение: вы сделали position:absolute; и ожидаем, что это будет динамично. Как это возможно. Удалите его .. либо сделайте это position:relative;, либо лучший выбор, не говоря уже о position собственности на al ... вы можете использовать margin-left:100px;, чтобы разместить свой div

источник

2013-07-13 13:49:35

DIV высота без изменения размера

ответ

Смежные вопросы