html - css 根据屏幕尺寸从左侧动态增加条形宽度

Question

你好有栏把面包屑和一些其他内容放在中间和后面有从左到右设置的背景。它从左到全宽这是这个的图像。

<div class="yellow_bend">
    <div class="content_wrapper">
        <div class="category_links">
            <ul class="category_ul clearfix">
                <li class="first_li"><a href="javascript:void(0);">Tripping 

Canoes<i class="fa fa-chevron-circle-right"></i></a>
                </li>
                <li><a href="javascript:void(0);">Sportsman Canoes<i class="fa 

fa-chevron-circle-right"></i></a>
                </li>
                <li><a href="javascript:void(0);">Solo Canoes<i class="fa fa-

chevron-circle-right"></i></a>
                </li>
                <li><a href="javascript:void(0);">Racing Canoes<i class="fa 

fa-chevron-circle-right"></i></a>
                </li>
                <li class="last_li"><a href="javascript:void(0);">Specialty 

Canoes<i class="fa fa-chevron-circle-right"></i></a>
                </li>
            </ul>
            <!-- end category_ul -->
        </div>
        <!-- end category_links -->
    </div>
    <!-- end content_wrapper -->
</div>

CSS

 .yellow_bend {
     background:#e2aa12;
     position:absolute;
     left:0;
     min-height:32px;
     height:32px\9;
     min-width:300px;
     top:0
 }
 .yellow_bend:after {
     background:url(../images/cc_ylw_end.png) center right no-repeat;
     right:-35px;
     height:32px;
     width:50px;
     top:0;
     z-index:-1
 }
 .yellow_bend:before {
     background:#e2aa12;
     width:100%;
     height:32px
 }
 .category_ul li a {
     color:#1f1f1f;
     font-weight:500;
     font-size:12px;
     line-height:10px
 }
 .yellow_bend:after, .yellow_bend:before {
     position:absolute;
     content:''
 }
 .content_wrapper {
     width:960px;
     margin:0 auto;
     position:relative
 }

Answer 1

如果你只想跨页面扩展 html 元素的一侧，你需要使用 before 和 after css 属性，如下所示

HTML

<div id="page-wrap">
     <h2 class="left-only">To the left, to the left</h2>

    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
#page-wrap {
    width: 50%;
    margin: 100px auto;
}
h1, h2, p {
    margin: 20px 0;
}
h2 {
    background: black;
    color: white;
    padding: 15px 0;
    position: relative;
}
h2:before, h2:after {
    content:"";
    background: black;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 9999px;
}
h2:before {
    right: 100%;
}
h2:after {
    left: 100%;
}
.left-only:after {
    display: none;
}

有用的 js fiddle 链接 http://jsfiddle.net/LEesQ/

这是关于 CSS 技巧的原始文章 http://css-tricks.com/full-browser-width-bars/

希望这对您有所帮助!