2

我是一名 CSS 初学者。我想要一个包含主要内容的半透明居中 div。它下面应该是一个包含目录的固定 div。

以下是我对此的尝试。这适用于特定的浏览器大小。但是当浏览器窗口的大小改变时，目录就会移动。

我希望目录与主 div 保持固定距离。

jsFiddle 链接

有了这个窗口大小，一切看起来都很好： 有了这个窗口大小，一切看起来都很好

减小窗口大小会在内容 div 下移动 toc： 减小窗口大小将 toc 移动到内容 div 下

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内部的内部 div，并设置其位置。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 回答