css - min-height:100% for content area, doesnt want to work! - Joomla! Forum - community, help and support
hi joomla community,
i working on 2.5 template right @ http://development.aycdesign.net/skin , , have been stuck on days , google has been no friend on issue. trying accomplish have variable size header, variable size footer, , have content container minimum of 100% of browser window size. i've tried under sun, , 2 problems.
1. container content in not expand 100% height of container.
2. on pages have scroll, portion of content clipping footer.
any suggestions on appreciated can resolved , move on!
the html:
....and css:
i working on 2.5 template right @ http://development.aycdesign.net/skin , , have been stuck on days , google has been no friend on issue. trying accomplish have variable size header, variable size footer, , have content container minimum of 100% of browser window size. i've tried under sun, , 2 problems.
1. container content in not expand 100% height of container.
2. on pages have scroll, portion of content clipping footer.
any suggestions on appreciated can resolved , move on!
the html:
code: select all
<?php
defined('_jexec') or die;
jhtml::_('behavior.framework', true);
$app = jfactory::getapplication();
$frontpagelayout = $this->params->get('frontpagelayout');
?>
<!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" xml:lang="en" lang="en" >
<head>
<!-- following jdoc head tag loads header , meta information site config , content. -->
<jdoc:include type="head" />
<link rel="stylesheet" href="../<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/default.css" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=8" />
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>
<html>
<body>
<div id="wrapper">
<?php if($this->countmodules('top')) : ?>
<div id="top">
<jdoc:include type="modules" name="top" style="none"/>
</div>
<?php endif; ?>
<?php if($this->countmodules('mnav')) : ?>
<div id="mnav">
<jdoc:include type="modules" name="mnav" style="none"/>
</div>
<?php endif; ?>
<div id="pagewidth">
<?php if($this->countmodules('left')) : ?>
<div id="leftcol">
<jdoc:include type="modules" name="left" style="none"/>
</div>
<?php endif; ?>
<div id="maincol">
<jdoc:include type="component" />
</div>
<?php if($this->countmodules('right')) : ?>
<div id="rightcol">
<jdoc:include type="modules" name="right" style="none"/>
</div>
<?php endif; ?>
<?php if($this->countmodules('user1')) : ?>
<div id="user1">
<jdoc:include type="modules" name="user1" style="none"/>
</div>
<?php endif; ?>
<?php if($this->countmodules('user2')) : ?>
<div id="user2">
<jdoc:include type="modules" name="user2" style="none"/>
</div>
<?php endif; ?>
<?php if($this->countmodules('user3')) : ?>
<div id="user3">
<jdoc:include type="modules" name="user3" style="none"/>
</div>
<?php endif; ?>
</div>
<?php if($this->countmodules('footer')) : ?>
<div id="footer">
<jdoc:include type="modules" name="footer" style="none "/>
</div>
<?php endif; ?>
</div>
</body>
</html>....and css:
code: select all
/* ******************************************************************** */
/* html reset */
/* ******************************************************************** */
body,div,span,ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,form,fieldset,label,input,textarea,p,th,td {
margin:0;padding:0;
}
html,body {
height:100%;
background: rgb(138, 126, 102);
color: #a5a56f;
font-family: arial, sans-serif;
font-size: .9em;
line-height: 1.25;
}
/* ******************************************************************** */
/* wireframe elements */
/* ******************************************************************** */
#wrapper {
position: relative;
height:auto !important;
height:100%;
min-height:100%;
}
#top {
background: rgb(0, 0, 0);
width: 100%;
}
#top .custom {
width: 80%;
margin: 0 auto 0 auto;
color: #fff;
text-align: right;
padding: .5em 0 .5em;
}
#pagewidth {
width: 80%;
min-height: 100%;
background: rgba(54, 54, 54, 0.5);
text-align: left;
margin: 0 auto;
padding-bottom: 3em;
overflow: hidden;
}
/*#leftcol {
float: left;
position: relative;
}
#rightcol {
float: right;
position: relative;
}
#maincol {
float: left;
position: relative;
}
#user1 {
float: left;
width: 29%;
height: 200px;
margin-right: 4%;
}
#user2 {
float: left;
width: 29%;
height: 200px;
}
#user3 {
float: right;
width: 29%;
height: 200px;
}*/
#footer {
background: rgb(0, 0, 0);
width: 100%;
height: 5%;
position: absolute;
bottom: 0;
}
#footer .custom {
width: 80%;
margin: 0 auto;
color: #fff;
text-align: right;
padding: .5em 0 .5em 0;
}
/* ******************************************************************** */
/* html elements */
/* ******************************************************************** */
a, a:visited, a:hover {
color: #f9af43;
text-decoration: underline;
}
a img {
border: none;
}
li {
margin-left: 0;
margin-bottom: 15px;
list-style: none;
}
h1, h2, h3 h4 {
margin-bottom: 5px;
font-family: arial, verdana, sans-serif;
}
h1 {font-size: 1.6em;} h2 {font-size: 1.5em;} h3 {font-size: 1.1em;} h4 {font-size: 1.0em;}
fieldset
{
border: none;
}
input {
padding: 5px;
margin: 0 0 10px 10px;
border: none;
}
input.default {
padding: 5px;
border: none;
background: #836a34;
color: #a5a56f;
}
input.button {
padding: 5px;
border: none;
background: #836a34;
color: #a5a56f;
}
select {
background: #836a34;
color: #a5a56f;
border: none;
margin: 4px 0 4px 0;
padding: 3px;
}
.search label {
display: none;
}
/* ******************************************************************** */
/* joomla elements */
/* ******************************************************************** */
.blog-featured h1,
.item-page h1 {
display: none;
}
ul.actions li {
list-style: none;
display: inline;
padding: 5px;
}
.item-page,
.items-leading,
.item.column-1,
.item.column-2,
.item.column-3,
.contentpaneopen {
padding-top: 13em;
}
.items-more {
margin-left: 20px;
}
.items-more ol {
padding-bottom: 10px;
}
.items-more li {
display: inline;
padding-right: 5px;
}
.pagination {
margin-left: 20px;
margin-bottom: 10px;
}
.pagination-start {
margin-left: -10px;
}
.pagination li{
display: inline;
padding: 0 10px;
}
.counter {
margin-bottom: 5px;
}
.category-module li {
margin-bottom: 5px;
}
.moduletable {
padding: 10px;
}
/* ******************************************************************** */
/* joomla blog elements */
/* ******************************************************************** */
.cols-1 {
display: block;
float: none !important;
margin: 0 !important;
}
.cols-2 .column-1 {
float: left;
width: 45%;
}
.cols-2 .column-2 {
float: right;
margin: 0;
width: 45%;
}
.cols-3 .column-1 {
float: left;
margin-right: 4%;
width: 28%;
}
.cols-3 .column-2 {
float: left;
margin-left: 0;
width: 28%;
}
.cols-3 .column-3 {
float: right;
width: 28%;
}
.items-row {
margin-bottom: 0px !important;
overflow: hidden;
}
.column-1, .column-2, .column-3 {
overflow: visible;
}
.column-2 {
margin-left: 40%;
width: 55%;
}
.column-3 {
width: 30%;
}
.blog-more {
padding: 10px 5px;
}
/* ******************************************************************** */
/* main menu */
/* ******************************************************************** */
#mnav .moduletable {
margin: 0;
padding: 0;
}
#mnav {
width: 100%;
padding: .5em 0 .5em 0;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 3.5em;
z-index: 1000;
}
#mnav ul {
width: 80%;
margin: 0 auto;
padding: 0;
}
#mnav ul li:first-child {
margin: 0;
padding: 0;
}
#mnav ul li {
margin-top: 3.5em;
list-style: none;
float: left;
position: relative;
}
#mnav ul li {
display: block;
padding: 0 1em;
color: rgb(17, 17, 20);
font-size: 1.1em;
text-decoration: none;
text-transform: uppercase;
}
#mnav ul li a:hover {
color: rgb(207,63,87);
}
#mnav ul li ul {
position: absolute;
left: -1999em;
}
#mnav ul li:hover ul,
#menu ul li.parent ul {
left: 0;
}
#mnav ul li ul li {
width: 20em;
margin: 0;
}
#mnav ul li:hover ul li {
background: none;
}
#mnav ul li:hover ul li a,
#mnav ul li ul li {
margin-top: .1em;
margin-bottom: .1em;
background: rgba(255,255,255,0.5);
padding: .7em 1em .7em 1em;
font-size: .8em;
}
#mnav ul li ul li a:hover,
#mnav ul li.active ul li a:hover {
color: rgb(207,63,87);
}
it seems me somewhere, actual height must determined, min-height % defined actual height of containing object.
try putting actual height in px on div#wrapper see if else "cascades" correctly.
if works, you'll need bit of javascript test height of window , set needed.
try putting actual height in px on div#wrapper see if else "cascades" correctly.
if works, you'll need bit of javascript test height of window , set needed.
Comments
Post a Comment