Question

我是html / css的新手，我正在研究一个正常运行的网页，但div包装器/页脚存在问题。我的HTML / CSS元素没有垂直跨越页面的整个页面，仅打开了它们在其中打开的窗口的初始视口。结果，我的包装器受到了类似的约束，最终我的页脚放置不正确（它应该跟随mainsec元素）。我已经花了数小时阅读html / css书籍和论坛帖子，问题仍然存在！奇怪的是，我能够使html / body元素正常工作，但是div仍然卡住了，现在由于未知原因，它们又被搞砸了。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
</head>

<body>
<div id="wrapper">
    <header id = "head">
    </header>
    <article class = "mainsec">
        <section class = "info">
            <h2>Topic</h2>
            <hr style = "width: 80%">
            <p>content...</p>
            <h4>Tools</h4>
            <dl>
                <dt>- Description</dt>
                <dd><a href="#">tool</a></dd>
            </dl>
        </section>
        <section class = "di">
            <h2>Integrations</h2>
            <hr style = "width: 80%">
            <h4>Integration 1</h4>
            <dl>
                <dt>- Description</dt>
                <dd><a href="#">link</a></dd>
            </dl>
        </section>
    </article>
    <footer id = "foot">
            <p style = "font-size : 16px;font-family : helvetica;text-align:center">DIEM: Data Integration Expectation Map  Contact: ...</p>
    </footer>
</div>
</body>
</html>

CSS：

html, body, div, 
article, footer, header,section{
  margin: 0px auto;
  padding: 0px;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, body {
  display: block;
}

html{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    position:absolute;
}
body {
    position: absolute;
    line-height: 1;
    width: 100%;
    height: auto !important;
    height: 100%;
    min-height: 100%;
    background-color: gray;
    clear: both;
}
/* still not sure how containment clearing works so ill leave this here */
.q:before,
.q:after {
  content: "";
  display: table;
}
.q:after {
  clear: both;
}
.q {
  clear: both;
  *zoom: 1;
}

#head{
    position:sticky;
/*     background: -webkit-linear-gradient(to right bottom,#646464, #c2c2c2);
    background:    -moz-linear-gradient(to right bottom,#646464, #c2c2c2);
    background:         linear-gradient(to right bottom,#646464, #c2c2c2); */
    text-align: center;
    height:66px;
    margin: 0px;
    padding: 0px;
    box-shadow:0px 1px 5px #494949;
    z-index: 1;
    background-color: white;
    width: 100%;
    float: left;
}

.mainsec {
    background-color: beige; 
    box-shadow: 1px 1px 5px black;
    position: absolute;
    top: 90px;
    left: 100px;
    width: 90%;
    display: block;
    clear: both;
}

#foot{
    display:block;
    background: -webkit-linear-gradient(to bottom right,#c2c2c2, #646464);
    background:    -moz-linear-gradient(to bottom right,#c2c2c2, #646464);
    background:         linear-gradient(to bottom right,#c2c2c2, #646464);
    margin-top:15px;
    width: 100%;
    bottom:0;
    position: absolute;
}

#wrapper {
    width: 100%;
    height: auto !important;
    height: 100%;
    min-height: 100%;
    position: absolute;
    display: block;
    margin: 0px auto;
    padding: 0px;
    clear: both;
  }

帮助！我已经删除了很多代码，以提高可读性，这在这里并不重要（并且仅通过该代码测试错误仍然存在）。

Answer 1

听起来像将meta视口标签放在头部的声音会有所帮助。一个视口元素为浏览器提供了有关如何控制页面尺寸和缩放比例的说明。

width = device-width部分将页面的宽度设置为跟随设备的屏幕宽度（视设备而定）。

initial-scale = 1.0部分设置浏览器首次加载页面时的初始缩放级别。

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Title Goes Here</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet/less" href="less/style.less">
<script src="js/libs/less-1.3.0.min.js"></script>

Answer 2

老实说。这与Javascript无关。我建议删除该标签。

所以您想要垂直放置的东西！？

井100%仅与设置大小的包装div相关。即，如果包装高度为700px，则100%的内部将变为700px

输入viewheight。将div元素更改为65vh，它将完全适应窗口的大小。但不是全高。

注意，但是viewwidth没有考虑滚动条。

使用vw可以做到这一点，就像这样：

#div {
 Background-color: blue;
 Width: 100vh;
 Height: 100vw;
}

如果您担心不同屏幕尺寸之间的对比度，那么您想看看meta viewport

不必要将html或body设置为100％。

另一件事是您的职位数量庞大。并非所有内容都必须为absolute。 Absolute用于浮动超出常规约束的范围。小费。位于position absolute的另一个div内的relative的div只能在该div包装器内移动。除非您强迫它像top，left，right，bottom

这样的位置移动到一边

有关页脚问题。您可以执行position fixed。或relative。

绝对位置用于将物体放置在特定位置。删除mainsec和foot上所有共同的位置，将使它们彼此追随，不需要位置

进一步阅读

https://www.w3schools.com/cssref/css_units.asp

https://www.w3schools.com/cssref/pr_class_position.asp

https://www.w3schools.com/css/css_rwd_viewport.asp

HTML元素不包含所有页面内容

2 个答案: