Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Layout

How-to Mix Content-dependent And Percentage Height/width Using Css Without Javascript

Post a Comment
I want to achieve a layout like this: ----------------------------------------------------------- | | | header height is

Solution 1:

Please refer to this,

Remove the borders and adjust the width that you want.

CSS

#headerWrapper{
    border:1px solid black;
    width:302px;
}
#header{
    border:1px solid red;
    min-width:300px;
    min-height:100px;
    background:green;

}
#headerScrl{
    width:300px;
    height:100px;
    overflow:scroll;
}

HTML

<div id="headerWrapper">
    <div id="header">
        header
   </div>
   <div id="headerScrl">
    <p> content </p>
    <p> content </p>
    <p> content </p>
    <p> content </p>
    <p> content </p>
    <p> content </p>
    <p> content </p>
    </div>
</div>

http://jsfiddle.net/uKejq/1/


Solution 2:

css:

* {margin:0px;padding:0px;overflow:hidden}
body {
    overflow: hidden;
}
div {position:absolute}
div#header {top:0px;left:0px;right:0px;height:60px; border: 1px solid #000}
div#wrapper {top:60px;left:0px;right:0px;bottom:0px; overflow: scroll;}

html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<div id="header"></div>
<div id="wrapper">
    saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>
    </div>
</body>

You may like these posts

Post a Comment for "How-to Mix Content-dependent And Percentage Height/width Using Css Without Javascript"