css: height 90%

Hi,

und wie sieht dein Versuch nun konkret aus?

CSS: 
html,body { height:100%; }
div#box { height:90%; }
... funktioniert bei mir tadellos.

mfg Maik
 
ok danke funktioniert ;-)

eine andere Frage noch:

ich möchte diesenn Div vertikal mittig poitionieren.

ich habe es mal mit

HTML: 
margin-top:auto;
margin-bottom:auto;

versucht funktioniert aber leider nicht
 
Moin,

das hat mir keine Ruhe gelassen, eine Box mit relativer Höhe (90%) im Viewport vertikal zu zentrieren, hab eben meine Bookmarks nochmal gründlich durchstöbert, und mich an der technischen Modellvariation http://www.pmob.co.uk/pob/vertical-center1.htm versucht, das Stylesheet auf deine Vorstellung umzuschreiben - and it works :-)

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Centered Element</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
* {margin:0;padding:0}
/* mac hide \*/
html,body{height:100%;width:100%;}
/* end hide */
body {
        text-align:center;
        min-height:90%;/* for good browsers*/ /* Wert editiert */
        min-width:60%; /* for good browsers*/ /* Wert editiert */
}
#xouter{
        height:100%;
        width:100%;
        display:table;
        vertical-align:middle;
}
#xcontainer {
        text-align: center;
        position:relative;
        vertical-align:middle;
        display:table-cell;
        height: 90%; /* Wert editiert */
}
#xinner {
        width: 60%; /* Wert editiert */
        background:#fff;
        height: 90%; /* Wert editiert */
        text-align: left;
        margin-left:auto;
        margin-right:auto;
        border:1px solid #000;
}
/* - */
</style>
<!--[if lte IE 8]>
<style type="text/css">
#xouter{display:block}
#xcontainer{top:50%;display:block}
#xinner{height:100%;top:-50%;position:relative} /* height:100% hinzugefügt */
</style>
<![endif]-->

<!--[if IE 7]>
<style type="text/css">
#xouter{
position:relative;
overflow:hidden;
}
</style>
<![endif]-->

</head>
<body>

<div id="xouter">
        <div id="xcontainer">
                <div id="xinner">
                     <div id="header">
                          <h1 id="logo"><a href="#index.htm">Raw CSS examples</a></h1>
                     </div>

                     <h2>Centered Vertical and Horizontal</h2>
                     <p class="maintxt">Re-size the page smaller and larger to see the vertical and horizontal effect. As you can see the element does not disappear off the top or the side of the screen unlike most other centering methods. Works in all versions of IE and most other modern browsers.</p>
                     <p>View Source to see the code</p>
                     <p>Go back to <a href="hoz-vert-center.htm">Vertical centering</a></p>
                </div>
        </div>
</div>

</body>
</html>


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück