CODEWITHSUNDEEP
jqueryhtmlcss
Hassan Faghihi
Hassan Faghihi

Reputation: 2021

CSS Div Margin in top and bottom [Answer Inserted]

what i want to do is some thing like this in both bellow and above my page:

enter image description here

what i tried was depending on these two reference:

i also take little look on some other pages...

i tried, mix them up, and and remove things and still couldn't get it right, i also understand that even this web site have lack, when i inject more content to them using debugger...

so I'm looking for a best way, that i have min-height of 100%, 10px height div in top, content div, and then 10px height bottom div...

Why I'm not simply using margin?

glad you asked, if i use margin then on 100% page will show scroll, cause total height goes over than just 100%, and if i use pending then my border-radius wont work, it will take place on browser border...

Isn't there a way with CSS?

If there isn't any way with CSS, is there one with jQuery?

My Failed Try

i almost replace all my CSS to achieve on of those in the references...

<body>
    <div class="page-container">
        <!--Top Margin-->
        <div class="top-margin"></div>
        <!--Content Here-->
        <div class="layout-place-holder">
            <div class="carousel-place-holder">

            </div>
            <div class="menu-place-holder">

            </div>
            <div class="content-place-holder">
                &nbsp;
                <br/><br/><br/><br/><br/><br/><br/>
                <br/><br/><br/><br/><br/><br/><br/>
                <br/><br/><br/><br/><br/><br/><br/>
                <br/><br/><br/><br/><br/><br/><br/>
                <br/><br/><br/><br/><br/><br/><br/>
                <br/><br/><br/><br/><br/><br/><br/>
                <br/><br/><br/><br/><br/><br/><br/>
                <br/><br/><br/><br/><br/><br/><br/>
                <br/><br/><br/><br/><br/><br/><br/>
                <br/><br/><br/><br/><br/><br/><br/>
                <br/><br/><br/><br/><br/><br/><br/>
                <br/><br/><br/><br/><br/><br/><br/>
                <br/><br/><br/><br/><br/><br/><br/>
            </div>
            <div class="footer-place-holder">

            </div>
        </div>
        <!--Bottom Margin-->
        <div class="bottom-margin"></div>
    </div>
</body>

html,
body,
form{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

body{
    background-image: url("images/bg_texture.png");
}

.page-container{
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

.top-margin{
    height: 10px;
    width: 100%;
}
.bottom-margin{
    height: 10px;
    width: 100%;
    bottom: 0;
    position: absolute;
}

.layout-place-holder {
    margin: 0 auto;/*Center - with no float*/
    background-color: #269abc;

    height: 100%;
    width: 960px;

    /*tl,tr,br,bl*/
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -ms-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
}

What i Exactly want?

What i want is a page, with 10px margin in both top and bottom, when the content are little, it should in total be wholly 100%, else if the content ran out of space, or were about to enter bottom margin region, it should increase the size of middle div, and still place the bottom on bottom of document, not just browser.

Note

I'm not going to use table, as it's very important for me in some cases

Answer

Sample Link: http://jsfiddle.net/mimosh_pisholack/9z8MP/2/

With special thanks to "Alan Piralla", i figure out that every element within JQuery have a height, so i did following:

PS: and do not fear about the script, i just define a class, you can just place function(){...} inside document.ready, but since you also have to check it on resize, i didn't.

Script [Fixed]:

        MyMethods={
            setTemplate: function(){
                var winHeight = $(window).height();
                var layoutHeight = $("#layout-place-holder").height();

                var topMarginHeight = $("#top-margin").height();
                var bottomMarginHeight = $("#bottom-margin").height();

                var winContentRequiredHeight=winHeight-bottomMarginHeight-topMarginHeight;

                $('#layout-place-holder').height(MyMethods.max(winContentRequiredHeight, layoutHeight));
                /*$(".content-place-holder").css("height",requiredHeight);*/
            },
            max: function (a,b){
                return (a>b)?a:b;
            }
        }

        // WHat to do on load?
        $(document).ready(function($){
            MyMethods.setTemplate();
        });

        // WHat to do on resize?
        $(window).resize(function(){
            MyMethods.setTemplate();
        });

HTML:

<body>
    <div class="page-container">
        <!--Top Margin-->
        <div id="top-margin" class="top-margin"></div>
        <!--Content Here-->
        <div  id="layout-place-holder" class="layout-place-holder">
            <div class="carousel-place-holder">

            </div>
            <div class="menu-place-holder">

            </div>
            <div class="content-place-holder">
                &nbsp;
                <br/><br/><br/><br/><br/><br/><br/>
                <br/><br/><br/><br/><br/><br/><br/>
                <br/><br/><br/><br/><br/><br/><br/>
                <br/><br/><br/><br/><br/><br/><br/>
            </div>
            <div class="footer-place-holder">

            </div>
        </div>
        <!--Bottom Margin-->
        <div id="bottom-margin" class="bottom-margin"></div>
    </div>
</body>

CSS

html,
body,
form{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

body{
    background-image: url("images/bg_texture.png");
}

.page-container{
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

.top-margin{
    height: 10px;
    width: 100%;
}
.bottom-margin{
    height: 10px;
    width: 100%;
    /*bottom: 0;
    position: absolute;*/
}

.layout-place-holder {
    margin: 0 auto;/*Center - with no float*/
    background-color: #269abc;

    height: 100%;
    width: 960px;

    /*tl,tr,br,bl*/
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -ms-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
}

Upvotes: 0

Views: 768

Answers (3)

Blazemonger
Blazemonger

Reputation: 92893

I think what you need is box-sizing: border-box.

simple html:

<div id="wrapper">
    <div id="contents"><!-- stuff goes here --></div>
</div>

fairly simple CSS:

* {
    box-sizing: border-box;
}
html, body, #wrapper {
    height: 100%;
    background: #666;
    margin: 0;
    padding: 0;
}
#wrapper {
    padding: 10px 0;
    height:  100%;
}
#contents {
    margin: 0 auto;
    padding: 20px;
    background: blue;
    border-radius: 5px;
    max-width: 80%;
    min-height: 100%;
}

http://jsfiddle.net/mblase75/r4aXB/

Upvotes: 4

Irfan TahirKheli
Irfan TahirKheli

Reputation: 3662

<div class="wrap">
    <div class="contents">This is test.</div>
</div>

.wrap {
    padding: 10px 20px;
   background:#0000ff;

}
.contents {
    margin: 0 auto;

    background: White;
    border-radius: 10px;  
    height: 100%;
padding: 20px;
}

Check this fiddle:

http://jsfiddle.net/HWZMD/1/

Upvotes: 1

Alan Piralla
Alan Piralla

Reputation: 1196

I had a similar case to solve, ended up solving it with jQuery. A stub of what you should do:

A) Write a function to calculate the height of your window

var winHeight = $(window).height();

B) Calculate the height of your content:

var contHeight = $('#your-content-div').height() - 20; // 20 = total margin added to top and bottom, set it in accordance with next instruction.

Set 10px margin to top and bottom of your div via CSS.

Now write a function to set your content size to the max value among winHeight and contHeight.

$('#your-content-div').height(max(winHeight, contHeight);

Finally, wrap it all up into a function to call on every window resize:

$(window).resize(function() { /* reset your heights here. */ });

These hints should do the job.

Upvotes: 1

Related Questions