Question

2件事（我相信他们是相关的）

我希望我的灯箱式absolute div（.g）是页面的高度而不是窗口（点击html中的链接显示它）
我希望绝对div（img）中的.g img能够响应窗口高度。

这可能吗？我已经尝试了很多广泛搜索过的东西，但是我对html和css的基本知识让我失望了。例如如果我在min-height:100%上使用html，那么我的div.g是页面的高度，但主内容div（#d）不会粘在窗口的底部。

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>testing</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="d">
  <div id="c">
    <p style="margin-bottom:450px"><a href="#a1">click for images</a></p>
    <p>end text</p>
  </div>
  <div id="f">footer</div>
</div>

<div class="g" id="a1">
  <a href="#" class="x"></a>
  <div>
    <a href="#a2"><img src="http://www.JBM-Computing.net/test/img1.png"></a>
    <p><a href="#">click img, or here to close</a></p>
  </div>
</div>

<div class="g" id="a2">
  <a href="#" class="x"></a>
  <div>
    <a href="#a1"><img src="http://www.JBM-Computing.net/test/img2.png"></a>
    <p><a href="#">click here to close, or click img</a></p>
  </div>
</div>

</body>
</html>

CSS

*      {margin:0;
        padding:0
}
html   {height:100%
}
body   {height:100%;
        font-family:Arial;
        background:lightSteelBlue
}
#d     {position:relative;
        top:2%;
        right:0;
        bottom:2%;
        left:0;
        margin:0 auto;
        width:80%;
        max-width:840px;
        min-height:96%;
        background:white;
        border:solid 1px green
}
#c     {position:relative;
        margin:4% auto 40px;
        max-width:80%;
        padding:5px;
        border:solid 1px red
}
#f     {position:absolute;
        right:10%;
        bottom:0;
        left:10%;
        max-width:80%;
        padding:5px;
        background:lightGrey
}
.g     {position:absolute;
        top:0;
        right:100%;
        bottom:100%;
        left:0;
        z-index:4;
        overflow:hidden;
        background:RGBA(0,0,0,.7)
}
.g:target {bottom:0;
           right:0;
           overflow:visible
}
.g a.x {position:absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
        z-index:5
}
.g div {position:relative;
        z-index:6;
        margin:8% 8% 0;
        background:powderBlue;
        border:10px solid darkKhaki
}
.g img {display:block;
        max-width:100%;
        margin:auto;
        border:solid 1px blue
}
.g p   {padding:5px
}

我也在jsFiddle here发布了它。调整窗口大小并观察页面的反应。

目前表现得可以接受，但并不完美。

非常感谢任何帮助。

编辑：为什么.g:target {bottom:0}不会使div填满body的整个高度？应该不应该吗？

Answer 1

如果我正确理解了您的问题，则问题是.g div - margin:8% 8% 0;会阻止弹出窗口以整页大小显示。

.g div {position:relative;
        z-index:6;
        height: 100%;            <=== Full page size
        box-sizing: border-box;  <=== Prevent vertical scroll bar
        /* margin:8% 8% 0; */    <=== Problem, so comment out
        background:powderBlue;
        border:10px solid darkKhaki
}

jsfiddle.net/W8kxm/

css 100％液体高度行为不端

1 个答案: