2 colonnes à 100% de hauteur en utilisant le HTML

Question

2 colonnes à 100% de hauteur en utilisant le HTML

Demandé el 19 de Mai, 2010: Quand la question a-t-elle été
325 affichage: Nombre de visites la question a
3 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je suis désespéré en essayant de dessiner cette simple chose. Deux colonnes s'étirant verticalement à 100%. Est-ce possible ?

ici il y a deux essais

<html>
<head>
<title>Columns</title>
</head>
<body>
<style type="text/css">
.wrapper {font-size:900px;
width:1200px;
margin:0 auto;
}
.col1 {
width:600px;
height:100%;
float:left;
background:#f00;
}
.col2 {
width:600px;
height:100%;
float:left;
background:#00f;
}
</style>
<div class="wrapper">
<div class="col1"> C o l u m n 1 </div>
<div class="col2"> C ol u m n 2 </div>
</div>
</body>
</html>

y

<!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" xml:lang="en-GB">
<head>
    <title>2 Column CSS Demo - Equal Height Columns with Cross-Browser CSS</title>

    <style media="screen" type="text/css">
/* <!-- */
*{
    margin:0;
    padding:0;
}

   html { 
    background-color: #ccc; 
        height: 100%; 
   } 
   body { 
    background-color: white; 
    width: 600px; 
    margin: 0 auto; 
height:100%; 
    position: relative; 
    border-left: 1px solid #888; 
    border-right: 2px solid black; 
   }  

#footer {
    clear:both;
    width:100%;
    height:0px;font-size:0px;
}

#container2 {

    clear:left;
    float:left;
    width:600px;
        overflow:hidden;
    background:#ffa7a7;  
}

#container1 {

    float:left;
    width:600px;
    position:relative;
    right:200px;
    background:#fff689;  
}
#col1 {
    float:left;
    width:400px;
    position:relative;
    left:200px;
        overflow:hidden;
}
#col2 {
    float:left;
    width:200px;
    position:relative;
    left:200px;
        overflow:hidden;
}
/* --> */
    </style>
</head>
<body>

<div id="container2">
    <div id="container1">
        <div id="col1">
            aaaa a a a a a a a a a aa aa a a a a a a a a aa aa a a a a a a a a aa aa a a a a  a a a aa a a a a aa aa a a a a a a a a aa aa a a a a a a a a aa aa a a a a aa a a a a aa aa a
        </div>
        <div id="col2">

            fghdfghsfgddn   fghdfghsfgddn    fghdfghsfgddn  fghdfghsfgddn   fghdfghsfgddn   fghdfghsfgddn   fghdfghsfgddn v
        </div>
    </div>
</div>
<div id="footer">
     &nbsp;
</div>
</body>

Un de plus

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>

<title>Test Layout</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<style type="text/css">
/*primary positional elements */
html, body{ height:100%; font-family:Arial, Helvetica, sans-serif;}
body {margin:0; padding:0; background:url(../images/top_grid.gif) repeat-x top right; font-size:small; }

#wrapper{position:absolute; margin:0;left:50%;margin-left:-499px; height:100%; min-height:100%; width:998px;}
html>body #wrapper{height:auto;} /*for mozilla as IE treats height as min-height anyway*/

#header{ position:absolute; margin:0; left:50%; margin-left:-499px;width:1000px;height:140px; background:url(../images/header.gif); background-color:#00FF66;z-index:99;}
#header a{display:block; position:absolute; top:40px; left:20px; height:80px; width:400px;}
#header a span{display:none;}

#main{ position:absolute; margin:0;left:50%;margin-left:-499px; height:100%; min-height:100%;width:1000px;padding:0;background:url(../images/background.gif) no-repeat top left yellow; z-index:1; border-left:1px solid #82A4E1; border-right:1px solid #82A4E1;}
html>body #main{height:auto; width:998px;} /*for mozilla as IE treats height as min-height anyway and to fix IE box model error*/

#left_col, #right_col{ position:absolute; margin:0; top:0; padding:0; height:100%; width:212px;border-left:1px solid #82A4E1; border-right:1px solid #82A4E1; z-index:3; background:url(../images/left_side_gradient.gif) repeat-x bottom right #ACB5E7;
}

#left_col{ left:20px;}
#right_col{ right:20px }
/*IE box model fix */
html>body #right_col{ width:210px; }
html>body #left_col{ width:210px; }
#left_col #menu{margin-top:195px;}

.col_top{ position:absolute; top:140px; left:-1px;background-image:url(../images/column_tops.gif);height:45px; width:212px;}
.clear_header{ height:155px; }
.menu_clear{ height:195px; }

#content{ padding:0 250px; height:100%; z-index:2; }

/* Announcments section */
#announcements{ text-align:right; }
#announcements ul{list-style-type:none; padding:0; margin:0;}
#announcements li{ padding:5px 15px 5px 15px;}
#announcements li a{ color:#1B3AA9;}
#announcements li a:hover{font-weight:bold; padding-left:-13px;}
#announcements h1{ font-size:18px; margin:0; padding:5px 15px 0 15px;}

.date{ display:block; font-weight:bolder;}
.column_img img{ border-bottom:1px solid white; border-top:1px solid white; }
#content h1{margin:.25em 0;}
#content p{margin:0 0 1em 0;}

/* nav block elements */
#nav {}
#nav, #nav ul { margin: 0; padding: 0; list-style: none; }
#nav ul { border-bottom:1px solid #fff; border-top:1px solid #737AD7}
#nav { margin-bottom: 1em; }
#nav li { display: inline; padding: 0; margin: 0; }

#nav li span {
display: block;
padding: 6px 10px;
font-weight: bold;
color: #666;
}

#nav li span#configParent, #nav li span #configuration {
display: inline;
font-weight: normal;
padding: 0;
}

#nav li a {
display: block;
padding: 8px 10px;
text-decoration: none;
border-bottom: 1px solid #737AD7;
border-top: 1px solid #fff;
font-weight:bold;
color:#1B3AA9;
}

#nav li a:hover {
background: #EBF1FF;
color:black;
}

#nav li li a {
padding: 3px 8px 3px 20px;
border:0;

}

#nav li ul{
border-bottom: 1px solid #737AD7;
border-top: 1px solid #fff;
}

#nav li li li a {
padding: 2px 8px 2px 40px;
border:0;
font-weight:normal;

font-size:90%;
}

#nav li li ul{
background:0;
border:0;
}

#nav .selected{
text-decoration:none;
background-color: #E0E2F7;
}
#nav .selected:hover {
text-decoration:underline;
}

#nav li li .selected{
text-decoration:underline;
background:0;
}
</style></head>

<body>
<div id="main">
<div id="left_col">
<div class="menu_clear"></div>

<div class="col_top"></div>
<div id="nav">
<ul>
<li><a href="">Menu Item 1</a></li>
<li><a href="">Menu Item 2</a></li>
<li><a href="">Menu Item 2</a></li>
<li><a href="">Menu Item 2</a></li>
<li><a class="selected" href="">Active Item</a>
<ul>
<li><a href="">Submenu Item</a></li>
<li><a class="selected" href="">Active Item</a>

<ul>
<li><a href="">Menu Item 1</a></li>
<li><a href="">Menu Item 2</a></li>
<li><a href="">Menu Item 2</a></li>
<li><a href="">Menu Item 2</a></li>
</ul></li>
<li><a href="">Submenu Item 2</a></li>
</ul>
</li>
<li><a href="">Menu Item 3</a></li>
</ul>

</div>
</div>

<div id="right_col">
<div class="menu_clear"></div>
<div class="col_top"></div>
<div class="column_img">
<img src="images/pictures/students.jpg" alt="Students working" />
</div>
<div id="announcements">
<h1>Announcements</h1>
<ul>
<li><span class="date">Jan. 31 2005</span><a href="">Nam liber tempor cum </a></li>
<li><span class="date">Jan. 31 2005</span><a href="">Workshop Announcement</a></li>

<li><span class="date">Jan. 31 2005</span><a href="">soluta nobis eleifend option congue nihil imperdiet</a></li>
<li><span class="date">Jan. 31 2005</span><a href=""> doming id quod mazim placerat facer possim assum</a></li>
<li><span class="date">Jan. 31 2005</span><a href=""> doming id quod mazim placerat facer possim assum</a></li>
</ul>
</div>
</div>

<div id="content">
<div class="clear_header"></div>

<h1>Welcome to the New Website</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>

</div>
</div>
<div id="header"><a href="http://www.#*$!xxxxxxx.org/"><span>Home</span></a></div>
</body></html>

La troisième ne fonctionne pas lorsque le contenu est trop grand pour s'adapter à la fenêtre du navigateur. Essayez de réduire la fenêtre et de la faire défiler vers le bas.

Demandé el 19 de Mai, 2010 par user345161

Answer 1

3 Réponses

Answer 2

7voto

jball Points 14152

Ce que vous recherchez, ce sont les dispositions de colonnes dites "Graal". Par exemple, Matthew James Taylor a développé un ensemble solide, comprenant La parfaite mise en page liquide à deux colonnes en "double page" (largeurs en pourcentage) qui devrait (moyennant quelques ajustements) répondre à vos besoins.

Répondu el 19 de Mai, 2010 par jball (14152 Points )

Answer 3

1voto

systemride Points 121

Je suis un défenseur de l'équilibre. Il est acceptable d'utiliser des tableaux quand cela a du sens, comme dans ce cas. Quel est l'intérêt d'utiliser des divs s'ils doivent être construits de manière aussi rigide ?

Savoir quand les garder, savoir quand les abandonner.

Répondu el 19 de Mai, 2010 par systemride (121 Points )

Answer 4

0voto

MadYoga Points 1

Il n'y a pas de solution à 100 % pour ce problème en HTML pur et en CSS avec des divs, il faut donc faire un compromis. Vous avez deux possibilités :

a) Si le contenu est plus long que la hauteur de la fenêtre, vous pouvez utiliser ce modèle.

<!DOCTYPE html>
<html>
  <head>
    <title>Two cols fit to the highest content height</title>
    <meta charset="utf-8" />
    <style>
      html,body{
        margin: 0;
        padding: 0;
      }
      #wrapper, #footer{
        margin: 0px auto;
        width: 960px;
        border: 1px solid red;
      }
      #col1, #col2{
        display: table-cell;
        vertical-align: top;
        width: 10px;
        min-height: 100%;
        height: 100%;
      }
      #col1{border: 1px solid green;}
      #col2{border: 1px solid blue;}
      #footer{
        height: 30px;
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <div id="col1">a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a </div>
      <div id="col2">asdf asdf asdf<br/>adsf adsf adsf asdfadf<br/>adsf daf adsf aasdfasd </div>
    </div>
    <div id="footer">
      I'm the footer
    </div>
  </body>
</html>

b) Si la fenêtre est plus haute que vos colonnes, vous pouvez utiliser celle-ci.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>2 Column CSS Demo - Equal Height Columns with Cross-Browser CSS</title>
    <style media="screen" type="text/css">
      *{
        margin:0;
        padding:0;
      }

      html {
        height: 100%;
      }

      body {
        background-color: white;
        width: 405px;
        height: 100%;
        margin: 0 auto;
        border-left: 1px solid #888;
        border-right: 2px solid black;
      }

      #wrapper {
        width:100%;
        min-height: 100%;
        height: 100%;
        background:#fff689;
      }

      #col1, #col2 {
        display: inline-block;
        vertical-align: top;
        width: 200px;
        min-height: 100%;
        height: 100%;
      }

      #col1 {
        background:#00f;
      }

      #col2 {
        background:#f00;
      }

      #footer {
        position: relative;
        top: -30px;
        height: 0px;
      }

      #footer div {
        height: 30px;
        background: #0f0;
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <div id="col1">
        I'm the column #1
      </div>
      <div id="col2">
        I'm the column #2
      </div>
    </div>
    <div id="footer">
      <div>I'm the footer</div>
    </div>
  </body>
</html>

Vous pouvez aussi résoudre le problème avec JavaScript. Dans ce cas, il suffit de prendre la hauteur de la colonne la plus haute et de définir la même valeur pour la colonne la plus basse.

Répondu el 22 de Mars, 2013 par MadYoga (1 Points )

2 colonnes à 100% de hauteur en utilisant le HTML

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

2 colonnes à 100% de hauteur en utilisant le HTML

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: