无法使 div 宽度响应

Question

这是我的代码。

我使用了 jquery 和 onsenui 的垂直制表符。

在 Firefox 中：使用 CTRL+SHIFT+M 在 mobile/tablet 模式下查看。

现在我正在使用这个超过 600px 的平板电脑

index.html

    $(document).ready(function() {
      ons.bootstrap();
      $('#tabs').tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
    });

.ui-tabs.ui-tabs-vertical {
  padding: 0;
  width: 42em;
  margin-left: 6%;
}
.ui-tabs.ui-tabs-vertical .ui-widget-header {
  border: none;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav {
  float: left;
  width: 10em;
  background: #F2F2F2;
  border-radius: 4px 0 0 4px;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li {
  clear: left;
  width: 100%;
  margin: 0.2em 0;
  border: none;
  border-width: 1px 0 1px 1px;
  border-radius: 0px;
  overflow: hidden;
  position: relative;
  right: -2px;
  z-index: 2;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a {
  display: block;
  width: 100%;
  padding: 0.6em 1em;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a:hover {
  cursor: pointer;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
  margin-bottom: 0.2em;
  padding-bottom: 0;
  border-right: 20px solid white;
  border-left: 4px solid #7fcc28;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li:last-child {
  margin-bottom: 10px;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-panel {
  float: left;
  width: 50%;
  border-left: none;
  border-radius: 0;
  position: relative;
  left: 10px;
  top: 7px;
}
#a,
#b,
#c {
  z-index: 50;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="http://onsen.io/OnsenUI/build/css/onsenui.css">
  <link rel="stylesheet" href="http://onsen.io/OnsenUI/build/css/onsen-css-components.css">
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">

  <script src="http://onsen.io/OnsenUI/build/js/angular/angular.js"></script>
  <script src="http://onsen.io/OnsenUI/build/js/onsenui.js"></script>
  <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
  <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>


</head>

<body>
  <ons-navigator>
    <ons-page>
      <div style="min-height: 150px;"></div>
      <ons-list-item modifier="tappable" style="line-height: 500px; padding: 0 14px; background-color: #F2F2F2;">
        <ons-row>
          <ons-col>
            <div id="tabs" style="background-color: #F2F2F2; width:100%;">

              <ul>
                <li style="box-shadow: 2px 2px 2px 1px #888888;">
                  <a href="#a" style="font-style: Arial; font-size: 14px; color: #666666;">Vertical Tab 1</a>
                </li>
                <li style="box-shadow: 2px 2px 2px 1px #888888;">
                  <a href="#b" style="font-style: Arial; font-size: 14px; color: #666666;">Vertical Tab 2</a>
                </li>
                <li style="box-shadow: 2px 2px 2px 1px #888888;">
                  <a href="#c" style="font-style: Arial; font-size: 14px; color:#666666;">Vertical Tab 3</a>
                </li>
              </ul>

              <div id="a" style="box-shadow: 2px 2px 2px 1px #888888; background-color: #FFFFFF;">
                something goes here 1
              </div>


              <div id="b" style="box-shadow: 2px 2px 2px 1px #888888; background-color: #FFFFFF;">
                something goes here 2
              </div>


              <div id="c" style="box-shadow: 2px 2px 2px 1px #888888; background-color: #FFFFFF;">
                something goes here 3
              </div>
            </div>
          </ons-col>
        </ons-row>
      </ons-list-item>
    </ons-page>
  </ons-navigator>

</body>

</html>

这是我得到的输出

但是当我展开屏幕时，我无法像上图那样使宽度响应。我在右侧得到了一些额外的空间，如下所示。

有人可以帮忙吗？

Answer 1

在.ui-tabs.ui-tabs-vertical .ui-tabs-panel

中将width:50%更改为width: calc(100% - 6% - 300px);

然后将 width:10em 更改为例如width:180px 对于 .ui-tabs.ui-tabs-vertical .ui-tabs-nav

通过使用 calc- 可以设置元素的宽度，以适应边栏等给定宽度的变化。目前，它只是简单地固定为 50%

无法使 div 宽度响应

Couldn't make div width as responsive

html

css

jquery

onsen-ui

Demo Fiddle