位置绝对，负右移，滚动条删除

问题描述：

在窗口调整绝对定位DIV移动HTML的右边界之外 - 所以水平滚动条出现。但我需要*固定宽度列上的滚动条只有。任何营养？如何得到正确的评论安静地在HTML标签的右边界下？位置绝对，负右移，滚动条删除

<!DOCTYPE HTML> 
<html> 
<head><title>Absolute position right scrollbar removing</title></head> 

<body> 
    <style> 
    body {line-height: 1.5em;} 
    p {margin: 0;} 
    .page {position: relative; width: 400px; margin: 0 auto; background-color: #ccc;} 
    .comment-container {position: relative; width: 100%; height: 0; top: -1px;} 
    .comment {position: absolute; width: 200px; background-color: #eee; top: -1.5em; border-top: 1px solid #aaa;} 
    </style> 

    <div class="page"> 
    <p> 
     Text and images here. Scrollbar should appear when window size is less than 400px. 
    </p> 
    <div class="comment-container"> 
     <div class="comment" style="right: -200px;"> 
     Some outside comment on the right. Horizontal scrolbar on html-tag appears on window squeezing. 
     Is there any way to remove the scrollbar when this element goes outside? 
     </div> 
    </div> 
    <p> 
     More text, text and text goes here. 
    </p> 
    <div class="comment-container"> 
     <div class="comment" style="left: -200px;"> 
     Some outside comment on the left. No scrollbar on window resizing. 
     </div> 
    </div> 
    </div> 

</body> 
</html>

它似乎将这个包装做的伎俩：。第容器{溢出-X：隐藏; min-width：400px;身高：100％;底部：0; top：0;左：0;正确：0;位置：绝对;} 其他解决方案？ – yakunins 2012-07-26 08:55:10

答

如果使用overflow: hidden在正确的div /包装，你可以决定哪些内容将不会触发滚动条。

答

你把一切都放在一个容器中一个隐藏溢出，然后定位右栏right: -100px像这样：

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
html, 
body { 
    margin: 0; 
    padding: 0; 
    text-align: center; 
} 

body { 
    overflow: auto; 
} 
#container { 
    min-width: 960px; 
    zoom: 1; /*For ie6*/ 
    position: relative; /*For ie6/7*/ 
    overflow: hidden; 
    margin: 0 auto; 
} 

#main { 
    background: #cea; 
    width: 960px; 
    margin: 0 auto; 
    height: 700px; 
    position: relative; 
    top: 0; 
} 

#right, 
#left { 
    position: absolute; 
    height: 100px; 
    width: 100px; 
    top: 0; 
    z-index: 100; 
} 

#right { 
    background: #797; 
    right: -100px; 
} 

#left { 
    background: #590; 
    left: -100px; 
}  
</style> 
</head> 
<body> 
    <div id="container"> 
     <div id="main"> 
      <div id="left">left</div> 
      <div id="right">right</div> 
     </div> 
    </div> 
</body> 
</html>

位置绝对，负右移，滚动条删除

相关推荐