Question

我正在尝试单页设计，并通过本质上创建一列<div>元素（每个元素位于窗口高度的100％）并在其中放置一个绝对值来建立一个由多个不同页面组成的页面在另一个之下。

因此，每个页面都需要对其元素进行绝对设置，因为（据我所知）没有正常的文档流程可循。但是，在文字方面，我发现很难进行设计。我想尝试保留当前的设计，而不是从头开始。

在特定页面上，我有一个文本容器。在该容器中，有两个标题。第一个标题带两个小段，第二个标题带：

HTML

<div id="introTextContainer">
    <div id="introTextHeader" class="blurbheader">First title</div>
    <div id="introText" class="blurb">
            Generic text about the roots of the company
    </div>
    <div id="introTextParg2" class="blurb">
            further information about the roots
    </div>
    <div id="introStatement1" class="blurb StrongStatement">
            Second title
    </div>
    <div id="introTextParg3" class="blurb">
            Eye-catching mission statement
    </div>
</div>

CSS

.blurb {
    font-family: Lato;
    font-size: 16px;
    padding-right:10px;
    font-size: 1.4vh
}

.blurbheader {
    font-family: Lato;
    font-size: 2vh;
    padding-right:10px;
}

.StrongStatement {
    font-family: Lato;
    font-size: 20px;
}

#introTextContainer {
    height: 20%;
    width: 45%;
    background: rgba(255,255,255,0.8);
    position: absolute;
    left: 200px;
    top: 10%;
    border-radius: 5px;

}

#introTextHeader {
    position: absolute;
    width: 280px;
    left: 30px;    
    top: 5px;
    height: 10%;
}

#introText {
    position:absolute;
    left: 10px;
    font-family: Lato;
}

#introTextParg2 {
    position:absolute;
    left: 10px;
}

#introStatement1 {
    position:absolute;
    left: 30px;
}

#introTextParg3 {
    position:absolute;
    left: 10px;
}

在1080p的标准分辨率下，所有这些看起来都可以接受。但是，更改分辨率时，设计不会对此做出响应。如您所见，使用CSS时，我一直在试验文本的视口高度，但是<div>元素的间距和高度是另一回事。

如何在文本容器的范围内创建定位/大小上下文，以便可以在这些容器的范围内设置文本段落的高度和填充？当前的方法使用javascript，但是我不喜欢尝试使用javascript定位每个可能的屏幕尺寸的想法，因为这会导致大量的意大利面条式代码。理想情况下，我只想使用javascript设置“页面” <div>元素和包含框的高度。

编辑：页面设计的CSS，JS，HTML

第一页的宽度和高度为100％。后续页面使用JQuery进行了更改。在无缝滚动插件中使用值data-section-name。画布仅用于容纳背景图像：

HTML

<section id="pageOne" class="panel pageone" data-section-name="sectionpageOne"> <!-- About -->
    <canvas id="pageOneCanvas"></canvas>

        <div id="introTextContainer">
        <div id="introTextHeader" class="blurbheader">First title</div>
        <div id="introText" class="blurb">
            Generic text about the roots of the company
        </div>
        <div id="introTextParg2" class="blurb">
            further information about the roots
        </div>
        <div id="introStatement1" class="blurb StrongStatement">
            Second title
        </div>
        <div id="introTextParg3" class="blurb">
            Eye-catching mission statement
        </div>
    </div>
</div>

</section>

CSS

#pageOne {
    position: absolute;
    /*top: 0;*/
    left: 0;
    width: 100%;
}

#pageOneCanvas {
    height: 100%;
    width: 100%;
    z-index: 1;
    background-image: url("/Resources/images/aboutcanvas.jpg");
    background-size: cover;
    opacity: 0.6
}

JS

// Canvas height and positioning
var posheight = $(window).height();

$("#home").height(posheight);
$("#pageOne").height(posheight);
$("#pageTwo").height(posheight);
$("#pageThree").height(posheight);
$("#pageFour").height(posheight);
$("#pageFive").height(posheight);

$("#pageOne").css("top", posheight);
$("#pageTwo").css("top", (posheight * 2));
$("#pageThree").css("top", (posheight * 3));
$("#pageFour").css("top", (posheight * 4));
$("#pageFive").css("top", (posheight * 5));

此外，用于固定文本容器尺寸的当前解决方案也在JS中。您可以开始了解为什么我要在CSS中实现此功能，因为它在这里变得混乱了：

var introTextTitleHeight = $("#introTextHeader").height();


$("#introText").css("top", (introTextTitleHeight + 10));
$("#introTextParg2").css("top", ($("#introText").position().top + $("#introText").height() + 10));
$("#introStatement1").css("top", ($("#introTextParg2").position().top + $("#introTextParg2").height() + 10));
$("#introTextParg3").css("top", ($("#introStatement1").position().top + $("#introStatement1").height() + 10));

Answer 1

是否会删除子div上的position: absolute;而不执行您想要的操作？
并使用margin-left代替left。

所以规则看起来像这样：

#introTextHeader {
    margin-left: 30px;    
    margin-top: 5px;
    height: 10%;
}

#introText {
    margin-left: 10px;
    font-family: Lato;
}

#introTextParg2 {
    margin-left: 10px;
}

#introStatement1 {
    margin-left: 30px;
}

#introTextParg3 {
    margin-left: 10px;
}

相对定位到绝对定位的元素

1 个答案: