Etirer la page

Invité · 23/05/2013, 14h52

Bonjour,
A force d'essayer de faire du Voodoo dans mon css, je suis totalement perdu

Voici mon layout:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<body>
    <div class="page">
        <div id="header">
            <div id="menucontainer">
                <div id="title">
                    <h1>
                        Gestion Prod</h1>
                </div>
                <div id="logindisplay">
                    Welcome <strong>@User.Identity.Name</strong>!
                </div>
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Admin", "Index", "Admin")</li>
                </ul>
            </div>
        </div>
        <div id="main">
            @RenderBody()
        </div>
        <div id="footer">
        </div>
    </div>
</body>

et le CSS (besoin de plus de details ?)

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
body
{
    position:absolute;
    background-color: #5c87b2;
    font-size: .85em;
    font-family: "Trebuchet MS" , Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    color: #696969;
    width: 100%;
}
.page
{
    margin: 0;
    padding: 0;
    overflow: hidden;
    top: 0px;
    bottom: 0px;
}
 
header, #header
{
   width: 100%;
   top:0px;
   height:40px;
}
 
#main
{
    top: 40px;
    overflow: auto;
    padding: 15px;
    background-color: #fff;
    border-radius: 4px 0 0 0;
    -webkit-border-radius: 4px 0 0 0;
    -moz-border-radius: 4px 0 0 0;
}
 
footer, #footer
{
    bottom: 0px;
    height: 40px;
    background-color: #fff;
    color: #999;
    padding: 2px 0;
    text-align: center;
    line-height: normal;
    margin: 0 0 30px 0;
    font-size: .9em;
    border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
}

Ma page contient des divs (en gris) qui sont censees occuper une grande partie de l'écran, mais voila le resultat.

Merci pour toute aide

**rodolphebrd** · 23/05/2013, 15h25

bonjour,

Envoyé par css

A force d'essayer de faire du Voodoo dans mon css, je suis totalement perdu

faut arrêter les sciences occultes pour se recentrer sur les bases...

Il y a des propriétés qui trainent sans utilité, top, bottom,...
Body en position absolute... pourquoi cela?
Border-radius n'a plus besoin d'être préfixé...

Réglez vos hauteurs qui sont parfois trop petites, écrasant le contenu des blocs.

Invité · 23/05/2013, 15h43

Body en position absolute... pourquoi cela?

Car j'ai éssayé de suivre l'exemple donné ici

Maintenant que j'ai un peu épuré et enlevé la position absolute, meme le haut de mes divs n'est plus visible.

Il est certainement util de préciser que le style des divs centrales est généré par un script. disponible ici (jQuery Layout)

Je ne tiens pas a mètre de taille fixe, j'aimerais que ma page s'addapte a son contenu.

**rodolphebrd** · 23/05/2013, 15h57

Il semble que dans l'exemple que vous donnez position relative soit appliqué à Body et position absolute aux enfants de body....

Pour avoir une hauteur qui épouse tous le contenu vous pouvez utiliser height:100% et/ou min-height:100%, à voir en fonction de l'ensemble...

Invité · 23/05/2013, 16h13

Je viens de nest mes divs dans un

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

#TabContainer {width: 100%; height: 100%;}

Et ai modifié mon css comme ceci :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
body
{
    background-color: #5c87b2;
    font-size: .85em;
    font-family: "Trebuchet MS" , Verdana, Helvetica, Sans-Serif;
    color: #696969;
    width: 100%;
}
.page
{
    margin: auto;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
}
 
header, #header
{
   width: 100%;
   top:0px;
   height:40px;
}
 
#main
{
    top: 40px;
    overflow: auto;
    padding: 15px;
    background-color: #fff;
    border-radius: 4px 0 0 0;
    -webkit-border-radius: 4px 0 0 0;
    -moz-border-radius: 4px 0 0 0;
}
 
footer, #footer
{
    background-color: #fff;
    color: #999;
    padding: 2px 0;
    text-align: center;
    line-height: normal;
    margin: 0 0 30px 0;
    font-size: .9em;
    border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
}

J'obtiens le résultat souhaité, mais est-ce que la logique de ce CSS vous semble correcte ?

**rodolphebrd** · 23/05/2013, 16h59

http://css.developpez.com/faq/?page=...ement_absolute

Pour les réglages c'est top ou bottom et/ou left ou right.

Etirer la page

CSS

Vue hybride

Discussions similaires

Partager

Partager