0

我正在创建一个非常基本的 asp.net 网页来显示错误消息。它没有任何功能,只是一个静态页面。我的问题是中间的警告消息框面板具有启用正确自动换行的最小尺寸,但是当浏览器的大小调整为小于该面板时,我会在页面一侧获得空白。我没有大量使用网站、css 甚至 html 的知识或经验,所以如果有人能对这个问题有所了解,那就太好了:D

我已经上传了一些图片,这样您就可以看到正常的外观以及当我调整浏览器大小并向右滚动时会发生什么。

另外一个快速说明它发生在我测试过的所有浏览器(Chrome、IE、Mozilla)中,所以我相当有信心这是由于我缺乏知识:)

这是我的html/css:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Unauthorised.aspx.cs" Inherits="_Default" %>
<!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>
<style>
html, body {margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding:0; width:100%; height:100%; font-size:100%;}
#BannerImage {position:relative; padding:0; width:100%; height:10%;}
#OuterBackgroundPanel {position:absolute; width:100%; height:90%; z-index:0;}
#InnerBackgroundPanel{position:absolute; top:2%; left:1%; width:98%; height:94%; z-index:1;} 
#MessagePanel {position:absolute; border:3px solid #000000; top:33%; left:33%; width:33%; height:33%; min-height:175px; min-width:425px; max-height:175px; max-width:450px;}
h1 {text-align:center; font-family:Calibri; font-size:2em;}
h2 {text-align:center; font-family:Calibri; font-weight:normal; font-size:1.2em;}
p {text-align:center; font-family:Calibri; font-size:1em;}
</style>
<title>Unauthorised Personnel Warning</title>
</head>
<body>
<div id="Banner">
<asp:Image ID="BannerImage" runat="server" ImageUrl="~/Resources/Gradient Banner.png" />
</div>

<div id="Backgrounds">
<asp:Panel ID="OuterBackgroundPanel" runat="server" BackColor="#D6E8FF">
<asp:Panel ID="InnerBackgroundPanel" runat="server" BackColor="#EBF3FF">
<asp:Panel ID="MessagePanel" runat="server" BackColor="#FFFFFF">
<h1>Title text.</h1>
<h2>Message text.</h2>
<p>Description text.</p>
</asp:Panel>
</asp:Panel>
</asp:Panel>
</div>
</body>
</html>
4

1 回答 1

1

例如,您对横幅使用 min-width

#Banner{
   min-width:1000px;
}
于 2012-10-16T08:52:38.463 回答