Question

我已经修改了标签图表。当您单击左侧的选项卡时，它们会切换右侧的内容。唯一的问题是右侧的主要内容div，即使宽度为100％，也仅占整个屏幕的三分之一。有什么想法吗？

＆＃13;

* {
  padding: 0;
  margin: 0;
}
#container {
  display: block;
  height: 100%;
  width: 100%;
}
#topBar1 {
  height: 55px;
  width: 100%;
  background-color: #FAFAFA;
  border-bottom: 1px solid #d9d9d9;
  display: block;
  position: relative;
  z-index: 2;
}
#topBar2 {
  height: 22px;
  width: 100%;
  background-color: #FAFAFA;
  display: block;
  border-radius: 11%;
  box-shadow: 0 6px 10px -2.5px #ccc;
  position: relative;
  z-index: 2;
  transition: all;
}
main {
  display: block;
  background-color: #EEEEEE;
  height: 1000px;
  width: 100%;
  position: relative;
  z-index: 1;
  top: -5px;
}
nav {
  height: 100%;
  width: 261px;
}
nav::after {
  height: 100%;
  width: 1px;
  content: "";
  display: block;
  background: #d9d9d9;
  position: relative;
  left: 260px;
  top: -1000px;
}
input[type=radio] {
  display: none;
}
.tabs {
  list-style: none;
  position: relative;
  //border: 1px solid #ccc;
  width: 260px;
  height: 100%;
  top: 15px;
}
.tabs li {
  font-family: Roboto, sans-serif;
  font-size: 13px;
  padding: 10px 20px 20px 60px;
  color: #222222;
  //border: 1px solid #ccc;
  background-color: none;
  transition: all .2s ease-in-out;
}
.tabs li:hover {
  background-color: #d9d9d9;
}
.tabs li:active {
  background-color: #d9d9d9;
}
.tabs label {
  display: block;
  position: relative;
  cursor: pointer;
  top: 6px;
}
.tab-content {
  position: absolute;
  display: none;
  z-index: 2;
  height: 100%;
  width: 100%;
  left: 261px;
  top: 0;
  border: 1px solid #ccc;
}
[id^=tab]:checked~[class^=tab-content] {
  display: block;
}
.contentItem {
  //border: 1px solid #ccc;
  height: 38px;
  width: 200px;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 10px;
  background-color: #FAFAFA;
  box-shadow: .5px 2px 6px #ccc;
  float: left;
}
.documentIcon {
  height: 30px;
  width: 30px;
  border: 1px solid #ccc;
  margin: 3px;
  margin-left: 5px;
  margin-right: 10px;
  float: left;
}
.contentText {
  font-family: Roboto, sans-serif;
  font-size: 12px;
  color: #222222;
  line-height: 3;
}

＆＃13;

<div id="container">
  <div id="topBar1"></div>
  <!--topBar-->
  <div id="topBar2"></div>
  <!--topBar2-->

  <main>
    <nav>
      <ul class="tabs">
        <li>
          <input type="radio" name="tabs" id="tab-1" checked />
          <label for="tab-1">Staff Directory</label>

          <div class="tab-content" id="tab-content-1">
            <div class="contentItem" id="ci1">
              <img src="" alt="" class="documentIcon" />
              <p class="contentText">Telephone Extension List</p>
            </div>



          </div>
          <!--tab-content-->
        </li>

        <li>
          <input type="radio" name="tabs" id="tab-2" />
          <label for="tab-2">How-To Guides</label>
          <div class="tab-content" id="tab-content-2">
            <p>Put Tab 2 Content here</p>
          </div>
        </li>

        <li>
          <input type="radio" name="tabs" id="tab-3" />
          <label for="tab-3">OECTA Calendar</label>
          <div class="tab-content" id="tab-content3">
            <p>Put tab content 3 here</p>
          </div>
        </li>

        <li>
          <input type="radio" name="tabs" id="tab-4" />
          <label for="tab-4">Finance</label>
          <div class="tab-content" id="tab-content-4">
            <p>Put tab content for 4 here</p>
          </div>
        </li>

        <li>
          <input type="radio" name="tabs" id="tab-5" />
          <label for="tab-5">Directories and Contact Lists</label>
          <div class="tab-content" id="tab-content-5">
            <p>Put Tab 5 content here</p>
          </div>
        </li>

        <li>
          <input type="radio" name="tabs" id="tab-6" />
          <label for="tab-6">Upcoming Meetings</label>
          <div class="tab-content" id="tab-content-6">
            <p>Put tab 6 content here</p>
          </div>
        </li>


        <li>
          <input type="radio" name="tabs" id="tab-7" />
          <label for="tab-7">Manuals and Handbooks</label>
          <div class="tab-content" id="tab-content-7">
            <p>Tab Content 7</p>
          </div>
        </li>

        <li>
          <input type="radio" name="tabs" id="tab-8" />
          <label for="tab-8">Information and Forms</label>
          <div class="tab-content" id="tab-content-8">
            <p>Tab Content 8</p>
          </div>
        </li>

        <li>
          <input type="radio" name="tabs" id="tab-9" />
          <label for="tab-9">Visitor Information</label>
          <div class="tab-content" id="tab-content-9">
            <p>Tab Content 9</p>
          </div>
        </li>
      </ul>
    </nav>

  </main>

</div>

＆＃13;

Answer 1

你正在寻找这样的东西吗？ https://jsfiddle.net/csgn6051/9/

.tabs
{
    width: calc(100% - 270px);
}

宽度100％不使用全屏

1 个答案: