asp.net 和 HTML 中的 MasterPage 渲染有何不同
What difference rendering between MasterPage in asp.net and HTML
我很难得到我想要的。为简化起见，我采用 html 页面。而且是完美的渲染。
<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>
结果是页眉，内容 div，页眉和页脚之间 space。我的内容高度是动态的（如果内容很少，则 100% - XX px 带有页脚）。在大文本的情况下，div 模拟页脚和内容 div 之间的 space。还有我的页脚。
我试着把它放在 MasterPage 里。但是在内容很少的情况下，结果几乎没有什么不同。内容 div 只是文本的大小，直到页脚。
这里我的主人：
<%@ 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>
有我的主页
<%@ 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>
这是渲染图：
<!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>
也许时间太长了，我搜索了但是我没有看到我的错误...但是为什么 html 是好的而不是 MasterPage？如您所见，我使用相同的图片和相同的 css.
更新
在IE11和Chrome中是一样的。
用 IE，F12。我检查了计算选项卡：contenu div min-height=396px（不错）但是在选项卡 Disposition contenu heigth = 241.31px 下。
为什么会有这种差异？
当我对我的 html 页面做同样的事情时，我的两边都是 416px :-(
找到问题但不知道为什么
我删除了 doctype，现在它 运行 就像我的 html 页面一样。
但是这个 doctype 是什么以及为什么会干扰 render ？
我读到 here 问题是指定高度。我这样做是为了 html 和 body : 100% 但是为了翻页和继续它是一个最小高度...
使用这个标签
<asp:ContentPlaceHolder id="MainContent" runat="server">
</asp:ContentPlaceHolder>
在母版页中使用它，将您的布局结构分成 table 列，以便母版页快速呈现它可以理解
最后...保留文档类型并修改我的css以在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;
}
我添加我使用更少的文件来实现自动化
我很难得到我想要的。为简化起见，我采用 html 页面。而且是完美的渲染。
<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>
结果是页眉，内容 div，页眉和页脚之间 space。我的内容高度是动态的（如果内容很少，则 100% - XX px 带有页脚）。在大文本的情况下，div 模拟页脚和内容 div 之间的 space。还有我的页脚。
我试着把它放在 MasterPage 里。但是在内容很少的情况下，结果几乎没有什么不同。内容 div 只是文本的大小，直到页脚。
这里我的主人：
<%@ 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>
有我的主页
<%@ 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>
这是渲染图：
<!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>
也许时间太长了，我搜索了但是我没有看到我的错误...但是为什么 html 是好的而不是 MasterPage？如您所见，我使用相同的图片和相同的 css.
更新
在IE11和Chrome中是一样的。 用 IE，F12。我检查了计算选项卡：contenu div min-height=396px（不错）但是在选项卡 Disposition contenu heigth = 241.31px 下。 为什么会有这种差异？
当我对我的 html 页面做同样的事情时，我的两边都是 416px :-(
找到问题但不知道为什么
我删除了 doctype，现在它 运行 就像我的 html 页面一样。 但是这个 doctype 是什么以及为什么会干扰 render ？ 我读到 here 问题是指定高度。我这样做是为了 html 和 body : 100% 但是为了翻页和继续它是一个最小高度...
使用这个标签
<asp:ContentPlaceHolder id="MainContent" runat="server">
</asp:ContentPlaceHolder>
在母版页中使用它，将您的布局结构分成 table 列，以便母版页快速呈现它可以理解
最后...保留文档类型并修改我的css以在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;
}
我添加我使用更少的文件来实现自动化