左侧菜单有高度和最小高度100％

感谢您的耐心等待。我需要制作一个具有高度和最小高度的左侧菜单100％例如。左侧菜单有高度和最小高度100％

如果网站doesn't有很多的内容，左边的菜单应该去底部如果网站有很多内容，在左边的菜单应该去底部还可以，但在滚动条...

左，右div的始终必须是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％？ – 2013-04-22 13:53:16

它可能是！但是，如果它只有一些内容，它应该到底...但我尝试了一切，没有任何工作！ – 2013-04-22 13:55:58

所以你想要在底部的菜单？在任何时候？为什么在底部？而不是顶部？ – DiederikEEn 2013-04-22 13:56:50

试试这个，你告诉工作或不jsfiddle
CSS：

#right { 
    overflow-y: scroll; 
} 

td { 
    vertical-align:top; 
}

来源

2013-04-22 14:21:58 navand

谢谢@navand是我尝试过的一种方法......但它不是最好的方法......如果我找不到解决方案，请尝试这一个！ – 2013-04-22 14:26:26

你不想使用'

'？ – navand2013-04-22 14:34:14

@ navand现在谁做的？http://stackoverflow.com/q/83073/156755 – Basic 2013-04-22 18:35:44

我不认为有是一个纯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将设置您感兴趣的容器的高度动态。但是，如果你的dom真的很沉重，或者访问者的连接速度很慢，那么一个退步是，那么就会出现跳高。这意味着只要页面完成加载，您就会看到相关容器的高度会急剧增加。为了避免出现这种情况，您可以使用加载gif图像或者简单地使用内容的fadeIn效果。您可以了解更多关于淡入效果here

这里是小提琴。

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

如果你在这里需要更多的帮助，请不吝指教。

谢谢。

来源

2013-04-22 18:25:02 maksbd19

为了使高度：100％在所有浏览器中正常运行，您的父元素需要将高度指定为像素高度。这很复杂，因为有时您的内容需要比指定高度更多的空间。你可以使用javascript来解决这个问题，但这并不总是最好的解决方案。

来源

2013-04-22 19:40:49

左侧菜单有高度和最小高度100％

回答

相关问题