ウィンドウのサイズを変更すると、絶対配置された DIV がHTML の右境界の外に移動するため、水平スクロールバーが表示されます。しかし、中央の固定幅列にのみスクロールバーが必要です。何か解決策はありますか?適切なコメントを静かに HTML タグの右枠の下に移動するにはどうすればよいですか?
http://jsfiddle.net/9y5BW/1/を参照してください
<!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>