CSS：侧边栏固定宽度，背景为窗口边缘

时间：2014-05-07 07:03:54

标签： html css

以下是我要创建的内容的快速模型：http://aven.dk/site.png 

                      Browser width
    [————————————————————————————————————————————————]
     ————————————————————————————————————————————————
    |      |  FLUID WIDTH CONTENT |FIXED WIDTH|      |
    |      |                      |SIDEBAR    |      |
    |      |                      |           |      |
    |      |                      |           |      |
    |      |                      |———————————|——————|
    |      |                      |           |      |
    |      |                      |           |      |
    |      |                      |           |      |
    |      |                      |           |      |
    |WHITE |  WHITE               |           |      |
     ————————————————————————————————————————————————

           [——————————————————————————————————]
             width: 1000px; margin: 0 auto;

我将如何能够做到这一点，我可以使用纯CSS或一些jQuery吗？

我希望我的内容在浏览器中居中，1000px宽。

我的侧边栏将有一个固定宽度向右浮动，其高度需要是动态的，即我无法使用背景图像来模拟这个。侧边栏将呈深红色，此颜色也必须扩展到浏览器的右侧，边缘。

到目前为止，我有这个：http://jsfiddle.net/AcLLT/1/ 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;

            box-sizing: border-box;
        }

        body {
            background: #eee;
        }

        .container {
            width: 1000px;
            margin: 0 auto;
        }

        .content {
            float: left;
            width: 100%;
            padding-right: 300px;
        }

        .content-bg {
            background: #fff;
            position: relative;
        }

        .content-bg:before {
            right: 100%;
            background: #fff;
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            width: 9999px;
        }

        .sidebar {
            float: left;
            width: 300px;
            margin-left: -300px;

            background: #00f;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            <div class="content-bg">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
            </div>
        </div>

        <div class="sidebar">
            2
        </div>
    </div>
</body>
</html>

3 个答案:

答案 0 :(得分：0)

您可能需要这样的JSFiddle Link DEMO

HTML 

<div class="container">
    <div class="content">
        <div class="content-bg">
            Lorem ipsum dolor sit amet
        </div>
    </div>
    <div class="sidebar">
        <div class="sidebar-bg">l2</div>
    </div>
</div>

CSS 

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        background: #eee;
    }

    .container {
        width: 100%;
        min-width:100px;
        margin: 0 auto;
        position:relative;
    }

    .content {
        background: #c00;
        position:absolute;
        top:0;
        left:0;
        right:50%;
        margin-right:-100px;
    }

    .content-bg {
        background: #f00;
        position: relative;
        width:600px;
        float:right;
    }

    .sidebar {
        background: #ccc;
        position:absolute;
        top:0;
        left:50%;
        right:0;
        margin-left:100px;
    }

    .sidebar-bg {
        background: #ddd;
        position: relative;
        width:400px;
        float:left;
    }

答案 1 :(得分：0)

好的，我设法用一些 jQuery 做了一些事情。

以下是代码：

<强> HTML： 

<div class="container">
    <div class="content">
        <div class="content-bg">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
        </div>
    </div>

    <div class="sidebar">
        <div class="sidebar-content">
            sidebar
        </div>
    </div>
</div>

<强> CSS： 

html,
body {
    font: normal 1em Arial, sans-serif;
    margin: 0;
}

.container {
    position: relative;
}

.content {
    float: left;
    text-align: justify;
    width: 700px;
}

.content-bg {
    margin: .5em;
}

.sidebar {
    background: darkRed;
    color: white;
    float: left;
    height: 250px
}

.sidebar-content {
    margin-left: .5em;
    width: 300px;
}

和

<强> jQuery的： 

$('.container').css({
    'padding-left': $(window).width()/2 - 500
});
$('.sidebar').css({
    'width': $(window).width() - 700 - ($(window).width()/2 - 500)
});

当然这里也是 JSFiddle 。

我在Chrome，Firefox，Opera，Safari的最新版本上测试过它们（他们停止在Windows版本上工作，所以它在Mac上可能不一样），IE11和Maxthon以及各处工作都很好。

我希望这是你需要的，而且效果很好。

修改

如果您想要更具响应性的内容，您可能需要尝试 this 之类的内容。

答案 2 :(得分：0)

嗯，这是符合您特定条件的解决方案：http://jsfiddle.net/jme11/k5c3j/

虽然有很多我真的不喜欢的东西。首先，它依赖于javascript来设置布局样式。但主要是，对元素使用基于像素的固定宽度意味着它根本没有响应。

你可以看到当你在小提琴中低于1000px时结果有多难看。当然，您可以使用媒体查询来解决这个问题，方法是更改​​内容宽度并将侧边栏设置为低于最小设备上的内容区域。尽管如此，它仍然不适用于当今使用的现代设备。我强烈建议重新考虑设计并制定一些基于响应网格的东西。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    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 {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* End Reset */
.wrapper {
    width: 1000px;
    margin: 0 auto;
    background-color: blue; 
    position: relative;
}
.main-content {
    width: 540px;
    margin: 0 30px 0;   
}
.sidebar-wrapper {
    background-color: red;
    position: absolute;
    top: 0;
    left: 600px;
}
.sidebar-content {
    width: 360px;
    margin: 0 30px 0;   
}
</style>
</head>
<body>
    <div class="wrapper">
        <div class="main-content">
            <h1>Content Container:</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
        </div>
        <div class="sidebar-wrapper">
            <div class="sidebar-content">
                <h2>Sidebar Container:</h2>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
            </div>
        </div>
    </div>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
    $( document ).ready(function() {
        $('.sidebar-wrapper').height($(window).height());
        $('.sidebar-wrapper').width($(window).width()-$('.sidebar-wrapper').offset().left);
    });
    </script>

</body>
</html>
相关问题
最新问题