CSS column sizing

Question

CSS column sizing

107 Views Asked by John At 20 October 2024 at 07:50

I have a page which can resize depending on the content. What I need is a way for the side bars to increase / decrease along with the body, but never to be less than 100% of the visible body.

Initially the page looks fine, but when I increase the content, I can see white space underneath the left and right sides, when there should not be any.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .container
        {
            background-color: Gray;
            height: 100%;
            width: 100%;
            position: absolute;
            clear: both;
        }
        .content
        {
            background-color: white;
            width: 80%;
            margin: 0 auto;
            height: 100%;
            min-height: 100%;
        }
    </style>
    <script type="text/javascript" src="js/jquery-latest.js"></script>
    <script language="javascript" type="text/javascript">
        function MakeBig() {
            var html = "";
            for (var i = 0; i < 500; i++) {
                html += "this is some random filler text<br/>";
            }
            $("#textHolder").html(html);
        }

        function MakeSmall() {
            var html = "";
            for (var i = 0; i < 5; i++) {
                html += "this is some random filler text<br/>";
            }
            $("#textHolder").html(html);

        }
    </script>
</head>
<body>
    <div id="container" class="container">
        <div id="content" class="content">
            This is some text in the content
            <button id="btnMakeBigDiv" onclick="MakeBig()">Increase Content</button><br/>
            <button id="btnMakeSmallDiv" onclick="MakeSmall()">Decrease Content</button>
            <div id="textHolder"></div>
        </div>
    </div>
</body>
</html>

Original Q&A

There are 2 best solutions below

**Ei Maung** · Answer 1

Here is a jQuery way. But, not a bullet proof one. Hope you would get some idea...

<style type="text/css">
    html { height: 100% }
</style>

<script type="text/javascript">
    $(document).ready(function() {
        if(!($(window).height() < $(document).height())) {
            $("#wrapper").css("height", "100%");
            $("#sidebar").css("height", "100%");
        }
        $("#content").resize(function() {
            if($("#content").height() > $(window).height())
                $("#sidebar").height($("#content").height());
        });
    });
</script>

<div id="wrapper">
    <div id="sidebar"></div>
    <div id="content"></div>
</div>

**Matheus Avellar** · Answer 2

I believe what you're searching for is position: fixed.

It basically disallows scrolling to remove an element from the screen. That is, you can scroll as much as you want, but the fixed element won't move.

Here's that in action with your example page:

// Sorry for the ".getElementById"'s thing, I didn't have jQuery
function MakeBig() {
    var html = "";
    for (var i = 0; i < 500; i++) {
        html += "this is some random filler text<br/>";
    }
    document.getElementById("textHolder").innerHTML = html;
}

function MakeSmall() {
    var html = "";
    for (var i = 0; i < 5; i++) {
        html += "this is some random filler text<br/>";
    }
    document.getElementById("textHolder").innerHTML = html;
}

body {
    /* <body> has a default margin of 8px, let's remove that */
    margin: 0;
}

.container {
    height: 100%;
    width: 100%;
    position: absolute;
    clear: both;
}

.content {
    background-color: white;
    width: 80%;
    margin: 0 auto;
    height: 100%;
    min-height: 100%;
}

/* Add 2 pseudo-elements inside .container */
.container::before,
.container::after {
    /* no text, only gray background */
    content: "";
    background-color: gray;
    /* fixed positioning -> won't leave the screen after scroll */
    position: fixed;
    /* 10% width -> main content has 80% width, that leaves 10% for each side */
    width: 10%;
    /* 100% height, or 0px from top to 0px from bottom */
    top: 0;
    bottom: 0;
}
.container::before {  left: 0;  }  /* align to left */
.container::after {  right: 0;  }  /* align to right */

<div id="container" class="container">
    <div id="content" class="content">
        This is some text in the content
        <button id="btnMakeBigDiv" onclick="MakeBig()">Increase Content</button><br/>
        <button id="btnMakeSmallDiv" onclick="MakeSmall()">Decrease Content</button>
        <div id="textHolder"></div>
    </div>
</div>

As you may have noticed, I didn't change your HTML and barely touched the JavaScript (only to replace the jQuery selections with vanilla JavaScript).

I added comments on the CSS to explain as best as I could what was the purpose of everything. Please don't hesitate to ask for clarifications!

I hope this is still relevant to you, even after 7 years! Cheers!

CSS column sizing

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in CSS

Related Questions in SIZING

Trending Questions

Popular # Hahtags

Popular Questions