html内容无法全局显示，而是一小块

AeNet 2018-11-11 10:47:29



index.html中 拆分成 iframe显示：

    #content{

      float: left;

    }

<div id="content">

  <iframe frameborder="0" src="/book?method=findAll" name="content";></iframe>

</div>



content.html：

    li{

        font:12px verdana, arial, sans-serif; /* 设置文字大小和字体样式 */

        list-style:none; /* 将默认的列表符号去掉 */

        padding:0px 5px;

        margin:0; /* 将默认的外边距去掉 */

        display:block;

        float:left; /* 往左浮动 */

    }

<ul>

    <c:forEach items="${booklist}" var="book">

    <li>

        <a href="/book?method=book_detalis&b_id=${book.b_id}" ><img src="/${book.image_path}">

        ${book.name}<br>${book.price}</a>

    </li>

    </c:forEach>

</ul>

来个人帮忙贡献点代码，有好几个页面都要在这个区域显示。是在index添加统一的代码就可以？还是每个将要显示的页面都要添加点代码？

...全文

127 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

方_糖 2018-11-14

打赏
举报

引用 7 楼 u013315260 的回复:

[quote=引用 6 楼 qq_36828433 的回复:] [quote=引用 3 楼 u013315260 的回复:] [quote=引用 1 楼 qq_36828433 的回复:] 你这个iframe里面的大小没定义啊在你的CSS里面加
.content iframe{
   width:500px; 
   height:500px;
}
就大啦，具体大小可以自己调整

没用呀老兄。在index.html里加上 .content iframe的长宽还是跟图上一样[/quote] #content也要定义大小撒[/quote] 真的都试过了。在index里设置 iframe的大小都不起作用。如果你熟悉前端的话帮我远程看下吧？代码还真是简短但是很奇怪[/quote] 我试了一下，没问题啊

你的代码的ul部分我没改，只是换了个iframe的src 代码给你


<html>
<head>
  <meta charset="utf-8" />
  <style>
    #content{
      float:left;
      width: 500px;
      height: 500px;
      border:1px solid red;
    }
    #content iframe{
      width: 500px;
      height: 500px;
    }
  </style>
</head>
<body>
  <div id="content">
    <iframe frameborder="0" src="main.html" name="content"></iframe>
  </div>
  <ul>
    <li><a href="test3.html" target="content">111</a></li>
  </ul>
</body>
</html>

test3.html是我随便放的一个网页 main.html


<style>
  div{
    width: 500px;
    height: 500px;
    background-color:#ccc;
  }
</style>
<div></div>

AeNet 2018-11-14

打赏
举报

引用 8 楼 qq_36828433 的回复:

[quote=引用 7 楼 u013315260 的回复:] [quote=引用 6 楼 qq_36828433 的回复:] [quote=引用 3 楼 u013315260 的回复:] [quote=引用 1 楼 qq_36828433 的回复:] 你这个iframe里面的大小没定义啊在你的CSS里面加
.content iframe{
   width:500px; 
   height:500px;
}
就大啦，具体大小可以自己调整

你的代码的ul部分我没改，只是换了个iframe的src 代码给你


<html>
<head>
  <meta charset="utf-8" />
  <style>
    #content{
      float:left;
      width: 500px;
      height: 500px;
      border:1px solid red;
    }
    #content iframe{
      width: 500px;
      height: 500px;
    }
  </style>
</head>
<body>
  <div id="content">
    <iframe frameborder="0" src="main.html" name="content"></iframe>
  </div>
  <ul>
    <li><a href="test3.html" target="content">111</a></li>
  </ul>
</body>
</html>

test3.html是我随便放的一个网页 main.html


<style>
  div{
    width: 500px;
    height: 500px;
    background-color:#ccc;
  }
</style>
<div></div>

[/quote] 嗯谢谢了哈。我的页面很简单，我准备重新写一个了，你能把 css设置教我一下吗(html里设置不用独立css文件)？。 index写3个框架 1.header.html是网页头部横条，写个标题。 2.navigator.jsp 左边竖条放很多行的文字 (是对content.jsp分类的链接) 3.content.jsp 除了header navigator，其他部分都是显示 content了。我看到网上写着 float之类的还有block属性的搞得我设置得越来越乱

AeNet 2018-11-13

打赏
举报

引用 6 楼 qq_36828433 的回复:

[quote=引用 3 楼 u013315260 的回复:] [quote=引用 1 楼 qq_36828433 的回复:] 你这个iframe里面的大小没定义啊在你的CSS里面加
.content iframe{
   width:500px; 
   height:500px;
}
就大啦，具体大小可以自己调整

没用呀老兄。在index.html里加上 .content iframe的长宽还是跟图上一样[/quote] #content也要定义大小撒[/quote] 真的都试过了。在index里设置 iframe的大小都不起作用。如果你熟悉前端的话帮我远程看下吧？代码还真是简短但是很奇怪

方_糖 2018-11-13

打赏
举报

你这个iframe里面的大小没定义啊在你的CSS里面加


.content iframe{
   width:500px; 
   height:500px;
}

就大啦，具体大小可以自己调整

方_糖 2018-11-13

打赏
举报

引用 3 楼 u013315260 的回复:

[quote=引用 1 楼 qq_36828433 的回复:] 你这个iframe里面的大小没定义啊在你的CSS里面加
.content iframe{
   width:500px; 
   height:500px;
}
就大啦，具体大小可以自己调整

没用呀老兄。在index.html里加上 .content iframe的长宽还是跟图上一样[/quote] #content也要定义大小撒

AeNet 2018-11-13

打赏
举报

Index.html 完整代码如下：

<html>

<head>
  <style>
    #header {
      background-color:black;
      text-align:center;
      padding:3px;
    }

    #nav {
      float: left;
      line-height:30px;
      background-color:black;
      width:100px;
      height:700px;
      float:left;
      padding:5px;
    }
    
    #content{
      float:left;
      width:50%;
      height:50%;
    }
    
    #footer {
      background-color:black;
      clear:both;
      text-align:center;
      padding:5px;
    }



  </style>
</head>

<body>

<div id="header">
  <iframe frameborder="0" src="/header.jsp" name="header"></iframe>
</div>


<div id="nav">
  <iframe frameborder="0" src="/category?method=findAllCategory" name="nav"></iframe>
</div>


<div id="content">
  <iframe frameborder="0" src="/book?method=findAll" name="content";></iframe>
</div>

<div id="footer">
  <iframe frameborder="0" src="/footer.jsp" name="footer"></iframe>
</div>

</body>
</html>

AeNet 2018-11-13

打赏
举报

引用 2 楼 sinat_35033848 的回复:


index.html中 拆分成 iframe显示：
    #content{
      float: left;
      width:50%;    //这里的50%可以修改成你要的大小
     height:50%;   //这里的50%可以修改成你要的大小
    }
<div id="content">
  <iframe frameborder="0" src="/book?method=findAll" name="content";></iframe>
</div>

content.html：
    li{
        font:12px verdana, arial, sans-serif; /* 设置文字大小和字体样式 */
        list-style:none; /* 将默认的列表符号去掉 */
        padding:0px 5px;
        margin:0; /* 将默认的外边距去掉 */
        display:block;
        float:left; /* 往左浮动 */
    }
<ul>
    <c:forEach items="${booklist}" var="book">
    <li>
        <a href="/book?method=book_detalis&b_id=${book.b_id}" ><img src="/${book.image_path}">
        ${book.name}<br>${book.price}</a>
    </li>
    </c:forEach>
</ul>

试过了没用额。好奇怪，我的header.jsp navigator.jsp footer.jsp都没有设置 width height，都是正常全屏显示了。就中间content.jsp 总是显示在那一小戳区域。

AeNet 2018-11-13

打赏
举报

引用 1 楼 qq_36828433 的回复:

你这个iframe里面的大小没定义啊在你的CSS里面加
.content iframe{
   width:500px; 
   height:500px;
}
就大啦，具体大小可以自己调整

没用呀老兄。在index.html里加上 .content iframe的长宽还是跟图上一样

sinat_35033848 2018-11-13

打赏
举报



index.html中 拆分成 iframe显示：

    #content{

      float: left;

      width:50%;    //这里的50%可以修改成你要的大小

     height:50%;   //这里的50%可以修改成你要的大小

    }

<div id="content">

  <iframe frameborder="0" src="/book?method=findAll" name="content";></iframe>

</div>



content.html：

    li{

        font:12px verdana, arial, sans-serif; /* 设置文字大小和字体样式 */

        list-style:none; /* 将默认的列表符号去掉 */

        padding:0px 5px;

        margin:0; /* 将默认的外边距去掉 */

        display:block;

        float:left; /* 往左浮动 */

    }

<ul>

    <c:forEach items="${booklist}" var="book">

    <li>

        <a href="/book?method=book_detalis&b_id=${book.b_id}" ><img src="/${book.image_path}">

        ${book.name}<br>${book.price}</a>

    </li>

    </c:forEach>

</ul>