Question

我试图将div翻过另一个，适合100％的屏幕。

在我的例子中，我想要关于我们的红色栏，以溢出100％的屏幕边界div。

HTML：

<div id="wrapper">
    <!-- header of the page -->
    <header id="header">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 holder">
                    <!-- logo of the page -->
                    <a href="#" class="nav-opener visible-xs"><i class="fa fa-bars"></i></a>                        
                    <div class="nav-holder">
                        <!-- nav of the page -->
                        <nav id="nav">
                            <ul class="list-inline">
                                <li><a href="index.html">Home</a></li>
                                <li class="active"><a href="quemsomos.html">About Us</a></li>
                                <li><a href="area-atuacao.html">Area</a></li>
                                <li><a href="servicos.html">Services</a></li>
                                <li><a href="contato.html">Contact</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- banner-block of the Page -->
    <div class="banner-block">
        <div class="container">
            <div class="row row-about">
                <div class="col-xs-12 banner-box">
                    <header class="banner-heading">
                        <h1>About Us</h1>
                    </header>
                </div>
            </div>
        </div>
    </div>
    <!-- contain main informative part of the site -->
</div>

CSS：

.banner-block {
    overflow: hidden;
    position: relative;
}

.banner-block:after {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.banner-block:after {
    z-index: -1;
    background: rgba(0, 0, 0, .6);
}

.banner-block .bg-stretch {
    z-index: -1;
}

.banner-block.centercenter-block {
    text-align: center;
}

.banner-block.right-block {
    text-align: right;
}

.banner-box {
    height: 252px;
    padding-top: 158px;
    white-space: nowrap;
}

.banner-box .banner-heading {
    display: inline-block;
    white-space: normal;
    vertical-align: middle;
}

.banner-box:before {
    content: "";
    vertical-align: middle;
    display: inline-block;
    height: 100%;
    width: 1px;
    overflow: hidden;
    margin: 0 0 0 -5px;
}

.row-about {
    background: red;
}
.banner-heading {
    margin: 11px 0 0;
    position: absolute;
}

.banner-heading h1 {
    margin: -70px 120px 15px;
    color: #fff;
    text-transform: uppercase;
    font-size: 36px;
    line-height: 40px;
}
#wrapper {
    position: relative;
    overflow: hidden;
    border: 1px solid black;
    margin:20px;
}

#header {
    bottom: auto;
    z-index: 9999;
    background: #fff;
}

http://jsfiddle.net/dempc3go

Answer 1

您指定的设计中间的红色条可以被视为与设计其余部分完全独立的元素。你可以这样做：

matplot(par.path, type='l', col=c("black","red"), lty=1)
legend("bottomleft", c("a","b"), col=c("black","red"), lty=1)

Codepen example

Answer 2

我理解你的问题。您正在使用课程.container。其宽度为width: 750px;。所以它不会让它增长到100％，

<div class="banner-block">
        <div class="container">
             ---
        </div>  
</div>

Answer 3

此外，如果我正确理解您的问题，为了适应整个屏幕，您可以从#wrapper中删除边距和边框，这将使您的“关于我们”部分适合整个屏幕。

http://jsfiddle.net/dempc3go/2/

CSS：

    .banner-block {
    overflow: hidden;
    position: relative;
}

.banner-block:after {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.banner-block:after {
    z-index: -1;
    background: rgba(0, 0, 0, .6);
}

.banner-block .bg-stretch {
    z-index: -1;
}

.banner-block.centercenter-block {
    text-align: center;
}

.banner-block.right-block {
    text-align: right;
}

.banner-box {
    height: 252px;
    padding-top: 158px;
    white-space: nowrap;
}

.banner-box .banner-heading {
    display: inline-block;
    white-space: normal;
    vertical-align: middle;
}

.banner-box:before {
    content: "";
    vertical-align: middle;
    display: inline-block;
    height: 100%;
    width: 1px;
    overflow: hidden;
    margin: 0 0 0 -5px;
}

.row-about {
    background: red;
}
.banner-heading {
    margin: 11px 0 0;
    position: absolute;
}

.banner-heading h1 {
    margin: -70px 120px 15px;
    color: #fff;
    text-transform: uppercase;
    font-size: 36px;
    line-height: 40px;
}
#wrapper {
    position: relative;
    overflow: hidden;
}

#header {
    bottom: auto;
    z-index: 9999;
    background: #fff;
}

子div溢出父div

3 个答案: