asp.net 和 HTML 中的 MasterPage 渲染有什么区别答案

【问题标题】：What difference rendering between MasterPage in asp.net and HTMLasp.net 和 HTML 中的 MasterPage 渲染有什么区别
【发布时间】：2016-01-13 01:56:30
【问题描述】：

我很难得到我想要的东西。为简化起见，我采用了一个 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，页眉和页脚之间有空格。我的内容高度是动态的（如果内容很少，则为 100% - XX px 的页脚）。在大文本的情况下模拟页脚和内容 div 之间的空间的 div。还有我的页脚。

我尝试将它放在 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%，但对于 page 和 contenu，它是最小高度...

【问题讨论】：

标签： html master-pages render

【解决方案1】：

使用这个标签

<asp:ContentPlaceHolder id="MainContent" runat="server">
</asp:ContentPlaceHolder>

在母版页中使用它并将您的布局结构划分为表格列，以便母版页快速呈现它可以理解的内容

【讨论】：

我将 '' 替换为 ''结果和我想的一样……

【解决方案2】：

最后...保留文档类型，我修改我的 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;
}

我补充说我使用更少的文件来自动化

【讨论】：