gpt4 book ai didi

html - 为什么创建页面时这些 Div 没有出现?为什么它们出现在调整大小上?

转载 作者:行者123 更新时间:2023-11-28 13:52:40 24 4
gpt4 key购买 nike

我希望对一些 UI 代码进行刷新,并认为我会看一下 Web 主要资源之一的想法:A List Apart .我找到了 this article关于使用固定位置创建具有固定标题、左面板和主面板的布局。我在 MasterPage 中实现了这个想法,但现在得到了非常奇怪的结果:当页面呈现时,页眉和主 div 根本不显示在 IE 7 中。当我调整到最小程度时,一切都正确地弹出到位。 FireFox 没有这样的问题。

这是 CSS(我将每个条目放在一行中以节省垂直空间):

html { overflow: hidden; }
body { overflow: hidden; padding: 0; margin: 0; width: 100%; height: 100%; font: 0.8em Verdana, sans-serif; line-height: 1.25; color: #333; background-color: White; }
#coachheader { padding: 0; margin: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 96px; overflow: hidden; }
#side { padding: 0; margin: 0; position: absolute; top: 100px; left: 20px; bottom: 20px; overflow: auto; width: 200px; }
#main {padding: 0; margin: 0; position: absolute; top: 100px; left: 240px; right: 20px; bottom: 20px; overflow: auto; }
a.SM { color:#666666; text-decoration:none; padding-left: 10px; padding-right:10px; margin-left:2px; margin-right:2px; vertical-align:middle; }
img.SM { height: 20px; vertical-align:middle; }

这是 HTML:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Coach.master.cs" Inherits="FitnessCompanion.Coach" %>
<!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>My Title</title>
<link rel="stylesheet" href="../../stylesheetforstaff.css" type="text/css" />
<!--[if lt IE 7]>
<style type="text/css">
#side { height:expression(document.body.clientHeight-120); }
#main { height:expression(document.body.clientHeight-120); width:expression(document.body.clientWidth-260); }
</style>
<![endif]-->
</head>
<body runat="server" id="body1">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div id="coachheader"> <!-- This div does NOT show up initially -->
<div style="text-align:left; float:left; margin-left:6px;">
<img src="/images/BSDILogoWeb.png" alt="BSDI" />
</div>
<!-- The Menu -->
<div style="float:right; margin-right:6px;">
<a menu table...>
</div>
</div>
<div id="side">
<menu output for the side - this div shows up!>
</div>
<div id="main">
<!-- Main Page - this Div does not show up. Contents: just a table -->
<div>
<asp:contentplaceholder id="ContentBody" runat="server">
</asp:contentplaceholder>
</div>
</div>
</form>
</body>
</html>

如您所见,这是对这些想法的非常简单的应用。我已经玩了几个小时了。我已经将溢出设置从自动更改为隐藏等,所以我不认为是这样。奇怪的是,这种方法的一个变体只有一个标题和主要区域在网站的另一部分工作得很好,但即使在我基本上删除了所有内容之后,这个变体在这个页面上也不起作用! 网站的这一部分位于子目录中,但应该无关紧要。

任何帮助将不胜感激!再一次,我觉得我有 1 毫米的距离:它在 Firefox 中工作正常,一旦我在任何方向调整窗口大小,无论多么轻微,它看起来都很好。

最佳答案

试着把这个:

<!--[if lt IE 7]>
<style type="text/css">
#side { height:expression(document.body.clientHeight-120); }
#main { height:expression(document.body.clientHeight-120); width:expression(document.body.clientWidth-260); }
</style>
<![endif]-->

在您的 标签之前的底部。

我不确定这是否有效,但我认为表达式是内联计算的,而 document.body 还不存在。

关于html - 为什么创建页面时这些 Div 没有出现?为什么它们出现在调整大小上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/634405/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com