2

CSS初心者です。メインコンテンツを含む半透明の中央の div が必要です。その下には、目次を含む固定 div が必要です。

以下は、これに対する私の試みです。これは、特定のブラウザ サイズで機能します。ただし、ブラウザー ウィンドウのサイズが変更されると、目次が移動します。

目次をメインの div から一定の距離に保ちたい。

jsFiddle リンク

このウィンドウ サイズでは、すべて問題ないように見えます。 このウィンドウサイズではすべて問題ないように見えます

ウィンドウ サイズを小さくすると、コンテンツ div の下に toc が移動します。 ウィンドウ サイズを小さくすると、コンテンツ div の下に toc が移動します

html

<html>
<head>
    <title>Testpage</title>
    <link rel='stylesheet' href='css/testpage.css'>
</head>
<body>
    <div id="contenttable">
        <h1>Contents</h1>
        <a href="#">Content 01</a><br>
    </div>
    <div id="content">  
        some text
    </div>
</body>
</html>

CSS:

#content{
    height: 1000px;
    width:  320px;
    position: relative;
    top: 50px;
    left: 50%;
    margin-left: -160px;
    background-color: cyan;
        }

#contenttable{
    padding: 12px;
    width:100%;
    height:200px;
    position: fixed;
    background-color: yellow;
    top: 125px;
    left: 6%;
}

#contenttable a{
    position: relative;
    top: 0px;
    left: 66%;
}

#contenttable h1{

    position: relative;
    top: 0px;
    left: 66%;
}
4

2 に答える 2

1

TOCabsolute内に配置された内部分割を使用して、その位置を設定できます。fixed

CSS3 Calcメインコンテンツの正しい位置を詳しく説明するために使用します。

opacity透明性のために使用しheight、自動オーバーフロー処理のためにメインコンテンツdivの設定を避けます。

デモ： http： //jsfiddle.net/vMAQz/1/

CSS

#contenttable {
  padding: 12px;
  width:100%;
  height:200px;
  position: fixed;
  background-color: yellow;
  top: 125px;
}
#innerContent {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100px;
  padding: 30px;
}
#content {
  padding: 10px;
  opacity: 0.8;
  width: 320px;
  position: relative;
  top: 50px;
  left: calc(100% - 480px);
  background-color: cyan;
}

HTML

<div id="contenttable">
  <div id="innerContent">
    <h1>Contents</h1>
    <a href="#">Content 01</a>
    <br/>
  </div>
</div>
<div id="content">
   some text
</div>
于 2013-01-22T22:23:06.380 に答える
0

コンテンツ div の幅を変更するだけです。

#content{
    height: 1000px;
    width:  30%;
    position: relative;
    top: 50px;
    left: 50%;
    margin-left: -160px;
    background-color: cyan;
        }
于 2013-01-22T22:24:21.927 に答える