Question

我有一个带有div的页面index.php：

<html>
    <head>
        <link rel="stylesheet" href="indexStyle.css">
    </head>
    <body>
        <div class="statusBar"><!-- some content here !--></div>
        <div class="screen"><?php include("content.php"); ?></div>
    </body>
</html>

此页面中的样式表indexStyle.css：

.statusBar{
    position:fixed;
    height:5%;
}

.screen{
    position:absolute;
    top:5%;
    min-height:95%;
}

content.php：

<link rel="stylesheet" href="contentStyle.css">
<div class="wrapper">
    <!-- some content here !-->
</div>

contentStyle.css：

.wrapper{
    min-height:100%;
}

但是当我运行此代码时，wrapper只是内容显示所需的最小高度，而不是至少全屏。

似乎wrapper没有查看其父级，在本例中为screen。这是因为我include("content.php")？我该如何解决这个问题？

为了您的信息：样式表确实有效，我已对此进行了测试。此外，include("content.php")工作正常，因为我确实看到wrapper内的内容。并且：screen确实覆盖了窗口的整个高度，从statusBar到页面底部。

编辑：在使用min-height和height搞砸了很多东西后，我觉得我已经吃饱了，决定用JavaScript做。我从screen取高度并将其放在wrapper中。它的工作原理并不是很优雅。

Answer 1

我同意@CBroe关于引用链接的位置，但是如果你将min-height更改为高度（但是将它保持在.wrapper类上以进行扩展），那应该照顾它：（{{3} }）

.statusBar{
  position:fixed;
  height:5%;
}

.screen{
  position:absolute;
  top:5%;
  height:95%;
}
.wrapper{
  min-height:100%;
}

关于样式表链接，为什么不直接引用包含的css：

<html>
<head>
    <link rel="stylesheet" href="indexStyle.css" />
    <link rel="stylesheet" href="contentStyle.css" />
</head>
<body>
    <div class="statusBar"><!-- some content here !--></div>
    <div class="screen"><?php include("content.php"); ?></div>
</body>
</html>

编辑：为了使div可以调整为内容，只保持.wrapper类的最小高度

include（）d div不从父级获取宽度和高度

1 个答案: