Can we set IFrame height and Width in %
I have an asp.net web application, and i have a header and below this a IFrame (width:100% heigth:100% here width works height is not working) if i put the dimensions with % it don't work but if i put a fixed dimension in px or pt or anything, it works... Is there a way to set the height and width in %
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="iframeimplementation.aspx.cs"
Inherits="iframeimplementation" %>
<!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></title>
<style type="text/css">
#top
{
width: 100%;
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
vertical-align: top;
border: 0px;
background-color: Black;
background-color: transparent;
}
#Covenantmenu
{
width: 100%;
font-size: 90%;
}
#Covenantmenu:after
{
/*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#Covenantmenu ul
{
border: 0px solid #BBB;
width: 100%;
background: url(Images/MenuTop.png) repeat-x;
padding: 5px 0;
margin: 0;
text-align: right;
vertical-align: middle;
}
#Covenantmenu ul li
{
display: inline;
}
#Covenantmenu ul li a
{
color: White;
padding: 5px;
margin: 1;
text-decoration: none;
border-right-width: thin;
border-right-color: Gray;
border-right-style: inset;
}
#Covenantmenu ul li a:hover
{
color: Black;
background: url(Images/MenuHover.png) repeat-x;
}
#Gradianbar
{
width: 100%;
font-size: 90%;
}
#Gradianbar ul
{
border: 0px solid #BBB;
width: 100%;
background: url(Images/Mainback1.png) repeat-x;
padding: 5px 0;
margin: 0;
text-align: right;
vertical-align: middle;
height: 1px;
}
.Grid
{
position: relative;
height: 100%;
width: 100%;
font-size: smaller;
font-family: Arial;
font-style: normal;
font-weight: normal;
top: 0px;
left: 0px;
text-align: center;
}
#I1
{
height: 100%;
}
iframe
{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<form id="form2" runat="server">
<div style="background-image: url('Images/MainBack.png'); background-repeat: repeat">
<table border="0">
<tr>
<td colspan="2">
<div id="Div1">
<div>
<asp:Image ID="Image4" Width="100%" ImageUrl="~/Images/Head_Banner.png" runat="server" />
</div>
<div id="Div2">
<ul>
<li><a href="">Inspection</a></li>
<li><a href="">Reports</a></li>
<li><a href="">Help Desk</a></li>
<li><a href="">User Configuration</a></li>
<li><a href="">System Configuration</a></li>
</ul>
</div>
<div id="Div3">
<ul>
</ul>
</div>
</div>
</td>
</tr>
<tr style="background-image: url('Images/MainBack.png'); background-repeat: repeat">
<td width="15%">
<div style="width: 90%; height: 100%; background-image: url('Images/MainBack.png');"
align="center">
<div style="margin: 0px auto;">
<asp:Panel ID="Panel4" runat="server" Height="100%" Width="90%" HorizontalAlign="Center">
<asp:Image ID="Image5" ImageUrl="~/Images/PanelTop.png" Width="100%" Height="40px"
runat="server" />
<asp:DetailsView ID="DetailsView4" RowStyle-Wrap="true" runat="server" CssClass="Grid"
BackColor="White" GridLines="None">
</asp:DetailsView>
</asp:Panel>
</div>
<br />
<br />
<div style="width: 100%; height: 100%; margin: 0px auto;">
<asp:Panel ID="Panel5" runat="server" Height="100%" Width="90%">
<asp:Image ID="Image6" ImageUrl="~/Images/PanelTop.png" Width="100%" Height="40px"
runat="server" />
<asp:DetailsView ID="DetailsView5" RowStyle-Wrap="true" runat="server" CssClass="Grid"
BackColor="White" GridLines="None">
</asp:DetailsView>
</asp:Panel>
</div>
<br />
<br />
<div style="width: 100%; height: 100%; margin: 0px auto;">
<asp:Panel ID="Panel6" runat="server" Height="100%" Width="90%">
<asp:Image ID="Image7" ImageUrl="~/Images/PanelTop.png" Width="100%" Height="40px"
runat="server" />
开发者_如何学Go <asp:DetailsView ID="DetailsView6" RowStyle-Wrap="true" runat="server" CssClass="Grid"
BackColor="White" GridLines="None">
</asp:DetailsView>
</asp:Panel>
</div>
</div>
</td>
<td width="85%" valign="top" align="left">
<iframe id="Iframe1" src="AdvancedSearch.aspx" runat="server" scrolling="no"></iframe>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Seems to work for me
<style>
iframe{
height: 50%;
width: 50%;
}
</style>
<iframe src="http://google.com"></iframe>
加载中,请稍侯......
精彩评论