0

ウィンドウのサイズを変更すると、絶対配置された 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>
4

2 に答える 2

1

overflow: hidden正しいdiv/ラッパーで使用する場合は、スクロールバーをトリガーしないコンテンツを決定できます。

于 2012-07-26T08:28:17.803 に答える
1

オーバーフローが隠されているコンテナーにすべてを入れてから、右の列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>
于 2012-07-26T08:31:40.493 に答える