设置框架位置

时间:2016-06-04 07:40:23

标签: html css iframe

问题1:

我在单个文件中设置4帧时遇到问题。我无法设置帧的位置。请指导我进一步解决我的问题... Black box show a frame while red box describes them briefly

针对home.jsp

    <?xml version="1.0" encoding="ISO-8859-1" ?>
    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/index2.css" />
        <title>SIMS</title>
    </head>
    <body bgcolor="#DDDDDD">

        <iframe class="top" src="header.html" scrolling="no" frameborder="0" >
        </iframe>

        <iframe class="right" src="" scrolling="auto" frameborder="1" >
        </iframe>

        <iframe class="bot" src="footer.html" scrolling="no" frameborder="0" >
        </iframe>

        <iframe class="left" src="menu.html" scrolling="auto" frameborder="0" >
        </iframe> 

    </body>
</html>

index2.css

iframe.top {
    position: fixed;
    border: none;
    float: top;
    width: 95%;
    height: 28%;
    }
iframe.left {
    border: none;
    position: relative;
    left: 20px;
    top: 20px;
    float: left;
    width: 20%;
    height: 200%;
}
iframe.right {
    position: fixed;
    border: none;
    float: right;
    width: 75%;
    height: 90%;
    }
iframe.bot {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    border: none;
    float: bottom;
    width: 100%;
}

问题2: 当我从菜单列表(menu.html)中选择一个项目时,它会在新选项卡中打开而不是右框架

2 个答案:

答案 0 :(得分:3)

试试这个例子。 header.jsp,footer.jsp,content.jsp menu.jsp 是项目中单独创建的文件。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <title>JSP Page</title>
</head>
<body bgcolor="#DDDDDD">
    <div>
        <div class="col-md-12 bg-danger">
            <%@include file="header.jsp" %>
        </div>
        <div class="col-md-3 bg-info" style="height: 300px;">
            <%@include file="menu.jsp" %>
        </div>
        <div class="col-md-9 bg-primary" style="height: 300px;">
            <%@include file="content.jsp" %>
        </div>
        <div class="col-md-12 bg-success">
            <%@include file="footer.jsp" %>
        </div>
    </div>
</body>

答案 1 :(得分:0)

尝试使用 Bootstrap 代替编写自己的CSS类。这会让你的生活更轻松。 以下链接将引导您进入网格示例,该示例将解决您的问题。

http://getbootstrap.com/css/#grid-example-basic