Javascript 定位故障

因此，我在把一些内容放在我的英雄/jumbotron图像下面时遇到了一些问题下划线内容不重要！它是通过一些jquery加载的。代码如下：

我想查看jumbotron图像下方的“我们做什么”内容

HTML:

---

您只需删除

位置：fixed来自
.hero


并将其添加到CSS中，以折叠边距：

.wwd-main > h1
{
    margin: 0;
}

这将解决您的问题，但是当您的屏幕垂直变小时，您会注意到底部的文本慢慢消失。这是因为您使用%来定义元素的尺寸，当屏幕缩小时，框相对于屏幕尺寸将更小。要解决此问题，请将我用于.wwd main的10%更改为90px


正文{
保证金：0；
填充：0；
}
.英雄{
位置：固定；
宽度：100%；
身高：100%；
文本对齐：居中；
颜色：#fff；
字体系列：“Lato”，无衬线；
}
.英雄文本{
位置：绝对位置；
宽度：640px；
高度：125px；
最高：50%；
左：50%；
转化：translateX（-50%）translateY（-50%）；
}
.英雄文本h1{
位置：绝对位置；
宽度：640px；
高度：125px；
字体大小：7.1米；
z指数：1；
利润上限：-15px；
}
.英雄img{
宽度：100%；
身高：100%；
}
.wwd干管{
位置：固定；
底部：0；
宽度：100%；
身高：10%；
背景色：#eeeeee；
z指数：100；
}

标题文本
我们所做的
您已经定义了两次文本的高度和宽度。
下面是代码的更改版本。
现在，您可以自定义样式，使其符合您的需要

PS：我建议您使用引导或任何其他库


正文{
保证金：0；
填充：0；
}
.英雄{
宽度：100%；
身高：100%；
文本对齐：居中；
颜色：#fff；
字体系列：“Lato”，无衬线；
}
.英雄文本{
位置：固定；
宽度：640px；
高度：125px；
最高：20%；
左：50%；
转化：translateX（-50%）translateY（-50%）；
}
.英雄文本h1{
位置：绝对位置；
宽度：640px；
高度：125px；
字体大小：7.1米；
z指数：1；
利润上限：-15px；
}
.英雄img{
宽度：100%；
身高：100%；
}
.wwd干管{
位置：相对位置；
身高：20%；
背景色：#eeeeee；
z指数：100；
}

标题文本
我们所做的
这很有效。有点，它现在不是一个完整的巨无霸图像了。在jumbotron的底部有大约15px的空白
.hero{
    position: fixed;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    font-family: 'Lato', sans-serif;
}

.hero-text {
    position: absolute;
    width: 640px;
    height: 125px;  
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.hero-text h1{
    position: absolute;
    width: 640px;
    height: 125px;  
    font-size: 7.1em;
    z-index: 1;
    margin-top: -15px;
}

.hero-img {
    width: 100%;
    height: 100%;
}

.wwd-main {
    position: relative;
    height: 30%;
    background-color: #eeeeee;
    z-index: 100;
}

.wwd-main > h1
{
    margin: 0;
}