jQuery MiniUI

标题: html网页如何填充整个mini-tabs [打印本页]

作者: hjane 时间: 2018-6-13 08:26:27 标题: html网页如何填充整个mini-tabs

[attach]10981[/attach]

您好！请问在每个mini-tabs页面里都没有充满。留有边框，请问如设置。如这条红色的边框，实际上是.mini-tabs-bodys的背景色。而淡黄色是html的背景色。请问怎么设置可以使html页面填满.mini-tabs-bodys而不显示出他底色出来。

作者: dforce 时间: 2018-6-13 09:04:19

你这页面是怎么放的？tab上url引入的吗？

作者: hjane 时间: 2018-6-13 10:08:09

dforce 发表于 2018-6-13 09:04
你这页面是怎么放的？tab上url引入的吗？

是的，是从tab上的url 引入的。

作者: hjane 时间: 2018-6-13 10:11:37

dforce 发表于 2018-6-13 09:04
你这页面是怎么放的？tab上url引入的吗？

作者: dforce 时间: 2018-6-13 11:02:25

hjane 发表于 2018-6-13 10:11
function activeTab(item) {

var tabs = mini.get("mainTabs");

请设置url加载的页面的样式
html,body{
height:100%;width:100%;
}

作者: hjane 时间: 2018-6-13 11:12:54

dforce 发表于 2018-6-13 11:02
请设置url加载的页面的样式
html,body{
height:100%;width:100%;

设了也是一样的，起不了作用
html, body
{
width:100%;
height:100%;
overflow:visible;
margin:0;
padding:0;
border:0;

} 你们测试下你们的例子也是一样的。如以下是你们例子的html
<head>
<title></title>
</head>
<body>
<div id="time"></div>
</body>
</html>
<script>
document.getElementById("time").innerHTML = new Date().getTime();
</script>
加载到tab里也是一样的有框出来

作者: dforce 时间: 2018-6-13 11:34:46

hjane 发表于 2018-6-13 11:12
设了也是一样的，起不了作用
html, body
{

[attach]10984[/attach]测试过了，只要那个子页面有这全局样式就能撑满

作者: hjane 时间: 2018-6-13 11:44:30

dforce 发表于 2018-6-13 11:34
测试过了，只要那个子页面有这全局样式就能撑满

您好，您发现您这个tab与左边的菜单栏之前一个白色的条子吗？我说的就是这个空隙。
要这个白色的条子也是蓝色就可以了。

作者: hjane 时间: 2018-6-13 11:58:06

hjane 发表于 2018-6-13 11:44
您好，您发现您这个tab与左边的菜单栏之前一个白色的条子吗？我说的就是这个空隙。
要这个白色的条子也是 ...

[attach]10985[/attach]按你设置，我重设了下tab.css中的.mini-tabs-bodys { border-color:transparent;
background:red;
}就会出现。你们设的是transparent。而在index.css中.navbar中就可以跟左边的菜单贴在一起。
在index.html中有以下代码：
<div class="navbar">
<div class="navbar-header">
      <div class="navbar-brand"><img src="../MenuImgs/logo.png" /></div>
      <div class="navbar-brand navbar-brand-compact">M</div>
</div>

<div class="container">
<div class="sidebar">
      <div class="sidebar-toggle"><i class = "fa fa-fw fa-dedent" ></i></div>
      <div id="mainMenu"></div>
</div>
<div class="main">
      <div id="mainTabs" class="mini-tabs main-tabs" activeIndex="0" style="height:100%;" plain="false" buttons="#tabsButtons" arrowPosition="side" >
         <div name="index" iconCls="fa-android" title="控制台" url="../DeskHomeTab/TabIndex.html"></div>
      </div>
      <div id="tabsButtons">
         <a class="tabsBtn"><i class="fa fa-home"></i></a>
         <a class="tabsBtn"><i class="fa fa-refresh"></i></a>
         <a class="tabsBtn"><i class="fa fa-remove"></i></a>
         <a class="tabsBtn"><i class="fa fa-arrows-alt"></i></a>
      </div>
</div>
</div>

所以我认为有可能是<div class="container">控制了与左边的距离。

作者: dforce 时间: 2018-6-13 12:06:19

hjane 发表于 2018-6-13 11:58
按你设置，我重设了下tab.css中的.mini-tabs-bodys { border-color:transparent;
background:red; ...

tabs的body区域默认有5px的padding,可以设置bodyStyle="padding:0"去除

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)