I'd difficulties to obtain what I want. To simplify, I take an html page. And it's perfect rendering.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title>Nat-Call</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-language" content="fr" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="Category" content="Informatique, programmation, limoges, développement, Web Master, prestations informatiques" />
<meta name="copyright" content="© Nat-Call. Tous droits réservés." />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/jpeg" href="/Images/Favico.ico" />
<link rel="stylesheet" type="text/css" media="screen" href="/Styles/Site.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1200px)" href="/Styles/BigSite.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 768px) and (max-width: 1024px)" href="/Styles/NormalSite.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 767px)" href="/Styles/SmallSite.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="/Styles/TinySite.css" />
</head>
<body>
<div class="page">
<div class="header">
<img style="border: 0; width: 250px;" src="/Images/NatCall.jpg" alt="Nat-Call"
title="Ingénieur en informatique Limoges" />
</div>
<div class="contenu">
<div class="BlocAccueil">
<div class="AGauche" style="margin:10px;">
<img src="/Images/vendeuse.jpg" style="width: 300px;" />
</div>
<div>
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker
</div>
</div>
</div>
<div class="abovFooter"></div>
</div>
<div class="footer Centre">
text footer
</div>
</body>
</html>
The result is an header, a content div with space between header and footer. My content heigth is dynamic (100% - XX px with the footer if few content). A div to simulate space between footer and content div in case of big text. And my footer.
I try to put it in MasterPage. But the result is little different in case of few content. The content div is just size of text, not until the footer.
here My master :
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Client.master.vb" Inherits="NatCall.Client" %>
<!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">
<head id="Head1" runat="server">
<title runat="server" visible="false"></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-language" content="fr" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/jpeg" href="/Images/Favico.ico" />
<link rel="stylesheet" type="text/css" media="screen" href="/Styles/Site.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1200px)" href="/Styles/BigSite.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 768px) and (max-width: 1024px)" href="/Styles/NormalSite.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 767px)" href="/Styles/SmallSite.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="/Styles/TinySite.css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div class="page">
<div class="header">
<img style="border: 0; width: 250px;" src="/Images/NatCall.jpg" alt="Nat-Call"
title="Ingénieur en informatique Limoges" />
</div>
<div class="contenu">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
<div class="abovFooter"></div>
</div>
<div class="footer Centre">
<a href="/Accueil.aspx" title="Retour à la page d'accueil">Accueil</a> - <a href="/Mention-Legale.aspx" title="Mentions légales du site">Mentions légales</a> - <a href="/Contact.aspx"
title="Posez vos questions">Nous contacter </a>
</div>
</body>
</html>
There my homePage
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Master/Client.Master" CodeBehind="Accueil.aspx.vb" Inherits="NatCall.Accueil" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<title>Nat-Call</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div class="BlocAccueil">
<div class="AGauche" style="margin: 10px;">
<img src="/Images/vendeuse.jpg" style="width: 300px;" />
</div>
<div>
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker
</div>
</div>
</asp:Content>
And here the render:
<!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">
<head id="Head1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-language" content="fr" /><meta http-equiv="X-UA-Compatible" content="IE=Edge" /><meta name="Category" content="Informatique, programmation, limoges, développement, Web Master, prestations informatiques" /><meta name="copyright" content="© Nat-Call. Tous droits réservés." /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="publisher" href="https://plus.google.com/+YannickingenierieinformatiqueFr2012" /><link rel="icon" type="image/jpeg" href="/Images/Favico.ico" /><link rel="stylesheet" type="text/css" media="screen" href="/Styles/Site.css" /><link rel="stylesheet" type="text/css" media="screen and (min-width: 1200px)" href="/Styles/BigSite.css" /><link rel="stylesheet" type="text/css" media="screen and (min-width: 768px) and (max-width: 1024px)" href="/Styles/NormalSite.css" /><link rel="stylesheet" type="text/css" media="screen and (max-width: 767px)" href="/Styles/SmallSite.css" /><link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="/Styles/TinySite.css" />
<title>Nat-Call</title>
</head>
<body>
<div class="page">
<div class="header">
<img style="border: 0; width: 250px;" src="/Images/NatCall.jpg" alt="Nat-Call"
title="Ingénieur en informatique Limoges" />
</div>
<div class="contenu">
<div class="BlocAccueil">
<div class="AGauche" style="margin: 10px;">
<img src="/Images/vendeuse.jpg" style="width: 300px;" />
</div>
<div>
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker
</div>
</div>
</div>
<div class="abovFooter"></div>
</div>
<div class="footer Centre">
<a href="/Accueil.aspx" title="Retour à la page d'accueil">Accueil</a> - <a href="/Mention-Legale.aspx" title="Mentions légales du site">Mentions légales</a> - <a href="/Contact.aspx"
title="Posez vos questions">Nous contacter </a>
</div>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Internet Explorer","requestId":"888a6c9574174df88bee7c1b0cfb6a41"}
</script>
<script type="text/javascript" src="http://localhost:55674/615e72c8d3af42d58e33849aa12f74b6/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
Perhaps it's too long time, I search But I don't see my error... But Why In html is good and not with MasterPage? Like u see, I use same picture and same css.
It's same in IE11 and Chrome. With IE, F12. I check calculate tab: contenu div min-height=396px (not bad) but under the tab Disposition contenu heigth = 241.31px. Why this difference?
And when I do same thing with my html page I've 416px both side :-(
I delete doctype and now it's run like my html page. But what's this doctype and why is interfering with render ? I read here problem is specify height. I do it to html and body : 100% but to page and contenu it's a min-height...
Finally ... Keeps the doctype and I modify my css to add an height on contenu
img {
max-width: 100%;
height: auto;
}
html {
height: calc(100% - 25px);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: url('/Images/fond.jpg') no-repeat center fixed;
background-size: cover;
/* version standardisée */
}
body {
font-size: 16px;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', Arial, 'Times New Roman', "Helvetica Neue", "Segoe UI", Helvetica, Verdana, sans-serif;
margin: 0;
padding: 0;
height: 100%;
}
.page {
position: relative;
width: 960px;
margin: 10px auto 0;
height: calc(100% - 25px);
}
.header {
top: 10px;
position: relative;
width: 960px;
background-color: white;
height: 150px;
}
.contenu {
top: 10px;
position: relative;
width: 960px;
margin: 30px 0;
background-color: white;
min-height: calc(100% - 210px); /*210=180+30+30*/
}
.footer {
width: 100%;
position: fixed;
bottom: 0;
background-color: #222324;
color: #fff;
height: 25px;
}
.Centre {
text-align: center;
}
.AGauche {
float: left;
}
.abovFooter {
background-color: transparent;
height: 40px;
}
.BlocAccueil {
text-align: justify;
padding: 10px 10px 0;
}
I add I use less file to automate