查看: 4971|回复: 9

html网页如何填充整个mini-tabs [复制链接]

hjane

注册会员

Rank: 2

电梯直达

楼主

发表于 2018-6-13 08:26:27 |只看该作者 |倒序浏览

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

附件: 你需要登录才可以下载或查看附件。没有帐号？立即注册

收藏1

dforce

超级版主

Rank: 8 Rank: 8

沙发

发表于 2018-6-13 09:04:19 |只看该作者

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

hjane

注册会员

Rank: 2

板凳

发表于 2018-6-13 10:08:09 |只看该作者

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

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

hjane

注册会员

Rank: 2

地板

发表于 2018-6-13 10:11:37 |只看该作者

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

dforce

超级版主

Rank: 8 Rank: 8

5^#

发表于 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

注册会员

Rank: 2

6^#

发表于 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

超级版主

Rank: 8 Rank: 8

7^#

发表于 2018-6-13 11:34:46 |只看该作者

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

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

附件: 你需要登录才可以下载或查看附件。没有帐号？立即注册

hjane

注册会员

Rank: 2

8^#

发表于 2018-6-13 11:44:30 |只看该作者

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

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

hjane

注册会员

Rank: 2

9^#

发表于 2018-6-13 11:58:06 |只看该作者

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

按你设置，我重设了下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

超级版主

Rank: 8 Rank: 8

10^#

发表于 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"去除

返回列表

		自动登录	找回密码
密码			立即注册