Левое меню с высотой и минимальной высотой 100%

Спасибо за ваше терпение. Мне нужно сделать левое меню с высотой и минимальной высотой 100% Например.Левое меню с высотой и минимальной высотой 100%

Если веб-сайт это не распространяется много контента, левое меню должно перейти к нижней Если веб-сайт имеет много контента, левое меню должно идти вниз также, но с скроллинга ...

Левые и правые дивы всегда должны быть 100%

Image Example http://www.diegomenezes.com/stack.jpg

Он мог бы использовать HTML5

Здесь ожно увидеть ссылку JSFiddle http://jsfiddle.net/6gSYn/

И вот мой код!

<div id="container"> 
    <div id="top"><h1>TESTE</h1></div> 
    <div id="content"> 
     <div id="left"> 
     <ul class="lista"> 
      <li>ITEM 1</li> 
      <li>ITEM 1</li> 
      <li>ITEM 1</li>     
      <li>ITEM 1</li> 
      <li>ITEM 1</li> 
      <li>ITEM 1</li> 
      <li>ITEM 1</li> 
      <li>ITEM 1</li> 
     </ul> 
     </div> 
     <div id="right"> 
     <p>TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE </p>   

      <div id="footer"> 
      <p>TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE </p> 
      </div> 
    </div> 
    </div>  

</div>

Здесь CSS

@charset "utf-8"; 
/* CSS Document */ 

* { 
margin: 0px; 
padding: 0px; 
} 
html { 
    height: 100%; 
} 

body { 
background: darkgrey; 
height: 100%; 

} 

#container {  
height: 100%; 
position: relative; 
} 

#top { 
height: 100px; 
width: 100%; 
background-color: black; 
color: white; 
float:left; 
} 

#content { 
background: darkgrey; 
width:100%; 
min-height: 100%; 
height:100%; 
} 

#content ul.lista { 
width: 250px; 
display: inline-block; 
vertical-align: top; 
background: lightgrey; 
color: red; 
bottom: 0; 
} 


#right { 
width: 1000px; 
color: blue; 
display: inline-block; 
padding: 10px; 
min-height: 400px; 
} 


#footer { 
color: black; 
height: 50px; 
text-align: center; 
width: 100%; 
}

источник

2013-04-22 Diego Menezes

Почему min-height 100%? почему не высота 100%? –

Это может быть! Но если у него есть только какой-то контент, он тоже должен пойти на дно ... но я все пробовал, и ничего не работало! –

Итак, вы хотите меню внизу? во все времена? А почему внизу? и не сверху? – DiederikEEn

Попробуйте и расскажите работал для вас или нет jsfiddle
CSS:

#right { 
    overflow-y: scroll; 
} 

td { 
    vertical-align:top; 
}

источник

2013-04-22 14:21:58 navand

Спасибо @navand, что это подход, который я пробовал ... но это не лучший способ ... Если я не смогу найти решение, попробуй это! –

Вы не хотите использовать '

'? – navand

@ navand Кто сейчас? http://stackoverflow.com/q/83073/156755 – Basic

Я не думаю, что там это чистый css Решение этой проблемы. Могут быть некоторые тики, которые нелегко понять и реализовать. Скорее вы можете решить свою проблему, используя небольшой javascript или точно jQuery.

позволяет считать блок кода следующим образом-

<div id="mainContainer"> 
    <div id="leftContainer"> 
     <p>Some contents which you want to put in the left blovk</p> 
    </div> 
    <div id="rightContainer"> 
     <p>Some contents which you want to put in the right blovk</p> 
    </div> 
</div>

сейчас, чтобы сделать эти два DIV leftContainer и rightContainer имеющий такую же ширину, что вам нужно добавить некоторые js -

$(document).ready(function(){ 
// making the height of the right container same as the left one 

    leftContainerHeight = $('#leftContainer').outerHeight(); 
    $('#rightContainer').height(leftContainerHeight); 

//or 

// making the height of the right container same as the left one 

    rightContainerHeight = $('#leftContainer').outerHeight(); 
    $('#leftContainer').height(rightContainerHeight); 

});

Этот js установит высота контейнера ваших интересов динамически. Но один резерв - если ваш дом действительно тяжелый или у посетителя медленное соединение, тогда произойдет скачок высоты. Это означает, что вы увидите, что высота зависимого контейнера резко возрастет, как только ваша страница завершит загрузку. Чтобы избежать этого, вы можете использовать загрузочное изображение gif или просто эффект содержимого содержимого fadeIn. Вы можете узнать больше о эффекте fadeIn here

Вот скрипка.

http://jsfiddle.net/6gSYn/9/

Если вам нужна дополнительная помощь, пожалуйста, здесь не стесняйтесь.

Спасибо.

источник

2013-04-22 18:25:02 maksbd19

Для того, чтобы высота: 100% работала должным образом во всех браузерах, вашему родительскому элементу нужно было бы указать высоту, указанную на высоту пикселя. Это сложно, так как иногда вашему контенту потребуется больше места, чем указанная высота. Вы можете использовать javascript, чтобы обойти эту проблему, но это не всегда лучшее решение.

источник

2013-04-22 19:40:49

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

Левое меню с высотой и минимальной высотой 100%

ответ

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