Extending sidebar down page

2019-06-25 08:22发布

站内问答 / HTML/CSS
804 6 6

I am trying to get my right sidebar to fill to extend the full length of the content within my #wrapper on this site: http://www.starmedianetwork.com/

I put a red border around it to try to see where my #right is on my page. I have tried working with:

height:100% on that #right and others. Also searched on google about clear fixes but I couldn't get that too work, also came across some solutions on experts-exchange, but those didnt work.

Any ideas how I can get my sidebar to extend with the background-color to fit the length?

标签： css xhtml
举报
6条回答
三岁会撩人
2楼-- · 2019-06-25 08:44

You can achieve this with a faux sidebar:

<div class="sidebar_back"><.div>
<div class="sidebar">
  <p>The sidebar content</p>
</div>

With this css:

.sidebar_back {
  top: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
  width: 200px;
  background: #444; // the color you want the sidebar to be
  position: absolute;
}

.sidebar {
  float: left;
  width: 180px;
  padding: 10px;
}

The .sidebar_back will extend all the way to the bottom of the page, so just give that the color that you'd like the sidebar to be, and the actual sidebar div will appear to be full-height. You can use a percentage-based width instead of pixels too. Here's a codepen showing an example: http://codepen.io/poopsplat/full/jquBv

查看更多
0人赞 添加讨论(0) 举报
来，给爷笑一个
3楼-- · 2019-06-25 08:51

Here is the way I have found to solve this issue:

You have to use four div tags - one main container which contains the sidebar, the main content, and a footer.

First, add and style the elements in your stylesheet:

#container {
width: 100%;
background: #FFFAF0;
}

.content {
width: 950px;
float: right;
padding: 10px;
background: #FFFAF0;
}

.sidebar {
width: 220px;
float: left;
padding: 5px;
background: #FFFAF0;
}

#footer {
clear:both;
background:#FFFAF0;
}

You can edit the different elements however you want to, just be sure you dont change the footer property "clear:both" - this is very important to leave in.

Then, simply set up your web page like this:

<div id=”container”>
<div class=”sidebar”></div>
<div class=”content”></div>
<div id=”footer”></div>
</div>

I wrote a more in-depth blog post about this at [http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container][1]. Please let me know if you have any questions. Hope this helps!

查看更多
0人赞 添加讨论(0) 举报
爷、活的狠高调
5楼-- · 2019-06-25 09:06

I haven't tried this, but...it feels like it should work (which of course is likely the kiss of death to the attempt):

#wrapper
    {position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: block;
    width: 100%;
    background-color: #ffa;
        }

#right {position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 15%; /*  this has to be fixed-size so you can account
            for it in the next bit; but can still be kinda
            fluid-ish... */
    display: block;
    background-color: #ccc;
    overflow: auto;
        }

#left   {width: 83%; /*  100 - (15% + 2% (for a gutter)) */
    margin-left: 1%;
        margin-right: 16%; /*   less than 100 - 83, to allow for rounding of % or px */
    display: block;
    background-color: #0ff;
    overflow: auto;
        }

p   {display: block;
    margin: 0.5em;
    padding: 0.2em 0.5em;
        }

...

<body>

    <div id="wrapper">

        <div id="left">
            <p>The left-hand content</p>

        </div>

        <div id="right">
            <p>The right-hand content</p>
        </div>

    </div>

</body>

It's not terribly pretty, but it does work. Though I'm not a fan of using position: absolute (or fixed) so if anyone's got a better suggestion I'd go for it =)

Incidentally, there's working demo of the implementation (with added 'lorem ipsum' goodness) over at: http://www.davidrhysthomas.co.uk/so/cols.html.

(Okay, I lied: I clearly have tried it now...)

查看更多
0人赞 添加讨论(0) 举报
够拽才男人
6楼-- · 2019-06-25 09:09

You cannot get a div to fill the height of it's parent. It may work in one browser, but I've had this problem and it is not simply solved by a height:100%.

You can simulate the background by creating a background that tiles all the way down the side. This isn't the most elegant solution.

The only other solution I have found is to use javascript. After the page loads, you can set the height of the div to precisely what it needs to be based upon the height of the div that you want it to expand within.

There may be some javascript libraries out there to assist you with positioning of this troublesome div, but I can't conjure up one at the moment.

查看更多
0人赞 添加讨论(0) 举报
虎瘦雄心在
7楼-- · 2019-06-25 09:09

I solved my sidebar problem for my admin page using jQuery with just a couple of lines of code

$('aside').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); // Extend sidebar to bottom of viewport
$(window).resize(function(){
    $('aside').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); //change size of bar when viewport height changes
    $('#main').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); //change size of main content when size of viewport changes
});

It seems to work in all browsers, however, when the content on the right is larger then the viewport and issue will occur when you scroll down. It can be fixed with some content height checks but for me it doesn't matter. Hope that helps someone out there =)

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)