内容不随窗口大小(宽度)CSS 调整

问题描述 投票:0回答:1

我想创建一个仪表板,在其中可以看到左侧的侧边栏(绿色)和右侧的内容(蓝色)。我能够将内容(右侧)分成类 .split-top.split-bottom-left amd .split-bottom-right(黄色)。所有类都由类 “member-content”(蓝色)包围,不幸的是,它有一个 overflow(请检查 Firefox Inspektor)。我试图通过为成员内容声明 max-width: calc(100% - 40px - 250px) 来摆脱这个问题,但它没有改变任何东西。 250px 是我的侧边栏宽度,40px 等于边距的 2 倍。 我的目标是通过调整浏览器的宽度来调整右下分割和上分割的内容。此外,滚动条在底部不可见。

换句话说:我希望每次打开浏览器并调整浏览器大小时都能看到带有顶部框和右侧框边框的完整内容。所有黄色框都会自动调整大小。

是否可以在没有 flex-box、css grid 和 JS 或 JQuery 的情况下创建它?我想避免使用全部 4 个。如果不是,我更喜欢使用 flex-box、CSS Gris 和 JQuery。

/* Split the screen in half */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@500&display=swap');


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Work Sans, sans-serif;
  
}



.member-content{
  background-color: #f1f3f7;
  position: absolute;
  width: calc(40px + 250px + 100%);
  height: 100%;
  overflow-x: hidden;  
  scrollbar-width: none;


}

.member-content .split-top {
  position: absolute;
  top: 0;
  left: 250px;
  height: calc(20% - 40px);
  max-width: calc(100% - 40px - 250px);
  scrollbar-width: none;
  overflow-x: hidden;

  padding: 20px 20px 20px 20px;
  margin: 20px 20px 20px 20px;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
  border-radius: 25px;


}
.split-left {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 250px;
  overflow-x: hidden;
  background-color: #2b479a;
  color: white;
  scrollbar-width: none;
  padding: 20px 0px 20px 20px;
z-index: 9;
}

.member-content .split-bottom-left {
  position: absolute;
  top: 20%;
  left: 250px;
  height: calc(80% - 40px);
  width: calc(30% - 40px);
  overflow-x: hidden;
  scrollbar-width: none;
  padding: 20px 20px 20px 20px;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
  border-radius: 25px;
  margin: 20px 20px 20px 20px;

}

.member-content .split-bottom-right {
  position: absolute;
  top: 20%;
  left: calc(30% + 250px);
  height: calc(80% - 40px);
  width: calc(70% - 40px - 250px);
  overflow-x: hidden;

  scrollbar-width: none;
  padding: 20px 20px 20px 20px;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
  border-radius: 25px;
  margin: 20px 20px 20px 20px;
}

.split-top::-webkit-scrollbar {
  display: none;
}
.split-left::-webkit-scrollbar {
  display: none;
}
.split-bottom-left::-webkit-scrollbar {
  display: none;
}
.split-bottom-right::-webkit-scrollbar {
  display: none;
}






.stats-games{
          width: 20%;
          height: 50%;
          border-radius: 10px;
          background-color: white;
          display: block;
          position: absolute;
}

.logo-text{
  background-color: #2b479a;
  color: black;
  display: flex;
  justify-content: space-between;
  position:fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 60px;
}

.logo-image{
  display: block;
}

.logo-toggle{

  display: block;
}


.items-menu{
  display: flex;
  flex-direction: column;
  padding: 10px 10px; 
}



.header-menu{
  color: blue;
}

.category-header-text{
  margin: 20px 0 20px 0;
  display: block;
  color: grey;
  font-size: 12px;
}

.sidear-dropdown-without-arrow{
  margin: 20px 0 0 0;
}

.subheader-text{
  margin: 20px 0 0 0;
}

li{
  list-style: none;
}

li a{
  text-decoration: none;
  color: grey;
}

li a:hover{
  text-decoration: none;
  color: #fff;
}

.navigation-bar{
  margin-top: 50px;
  overflow-y: hidden;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>

<body>

    <div class="side-bar-left">
        <div class="split-left">
            <div class="centered">
                <div class="logo-text">
                    <p class="logo-image">LOGO</p>
                    <p class="logo-toggle">HAM</p>
                </div>
                <div class="navigation-bar">
                    <div class="side-bar-menu">
                        <span class="category-header-text">MENU</span>
                        <div class="menu-menu">
                            <div class="submenu-menu">
                                <div class="sidear-dropdown-without-arrow">
                                    <i class='bx bx-cheese'></i>
                                    <span class="header-text">Dashboards</span>
                                </div>
                                <div class="items-menu">
                                    <li class="subheader-text">
                                        <span>
                                            <a href="portfolio.html" target="_blank">Products</a>
                                        </span>
                                    </li>

                                    <li class="subheader-text">
                                        <span>
                                            <a href="portfolio.html" target="_blank">Product Detail</a>
                                        </span>
                                    </li>

                                    <li class="subheader-text">
                                        <span>
                                            <a href="portfolio.html" target="_blank">Orders</a>
                                        </span>
                                    </li>


                                    <li class="subheader-text">
                                        <span>
                                            <a href="portfolio.html" target="_blank">See my portfolio</a>
                                        </span>
                                    </li>


                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="side-bar-menu">
                        <span class="category-header-text">MENU</span>
                        <div class="menu-menu">
                            <div class="submenu-menu">
                                <div class="sidear-dropdown-without-arrow">
                                    <i class='bx bx-cheese'></i>
                                    <span class="header-text">Dashboards</span>
                                </div>
                                <div class="items-menu">
                                    <li class="subheader-text">
                                        <span>
                                            <a href="portfolio.html" target="_blank">Products</a>
                                        </span>
                                    </li>

                                    <li class="subheader-text">
                                        <span>
                                            <a href="portfolio.html" target="_blank">Product Detail</a>
                                        </span>
                                    </li>

                                    <li class="subheader-text">
                                        <span>
                                            <a href="portfolio.html" target="_blank">Orders</a>
                                        </span>
                                    </li>


                                    <li class="subheader-text">
                                        <span>
                                            <a href="portfolio.html" target="_blank">See my portfolio</a>
                                        </span>
                                    </li>


                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="side-bar-menu">
                        <span class="category-header-text">MENU</span>
                        <div class="menu-menu">
                            <div class="submenu-menu">
                                <div class="sidear-dropdown-without-arrow">
                                    <i class='bx bx-cheese'></i>
                                    <span class="header-text">Dashboards</span>
                                </div>
                                <div class="items-menu">
                                    <li class="subheader-text">
                                        <span>
                                            <a href="portfolio.html" target="_blank">Products</a>
                                        </span>
                                    </li>

                                    <li class="subheader-text">
                                        <span>
                                            <a href="portfolio.html" target="_blank">Product Detail</a>
                                        </span>
                                    </li>

                                    <li class="subheader-text">
                                        <span>
                                            <a href="portfolio.html" target="_blank">Orders</a>
                                        </span>
                                    </li>


                                    <li class="subheader-text">
                                        <span>
                                            <a href="portfolio.html" target="_blank">See my portfolio</a>
                                        </span>
                                    </li>


                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="side-bar-menu">
                        <span class="category-header-text">MENU</span>
                        <div class="menu-menu">
                            <div class="submenu-menu">
                                <div class="sidear-dropdown-without-arrow">
                                    <i class='bx bx-cheese'></i>
                                    <span class="header-text">Dashboards</span>
                                </div>
                                <div class="items-menu">
                                    <li class="subheader-text">
                                        <span>
                                            <a href="portfolio.html" target="_blank">Products</a>
                                        </span>
                                    </li>

                                    <li class="subheader-text">
                                        <span>
                                            <a href="portfolio.html" target="_blank">Product Detail</a>
                                        </span>
                                    </li>

                                    <li class="subheader-text">
                                        <span>
                                            <a href="portfolio.html" target="_blank">Orders</a>
                                        </span>
                                    </li>


                                    <li class="subheader-text">
                                        <span>
                                            <a href="portfolio.html" target="_blank">See my portfolio</a>
                                        </span>
                                    </li>


                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="member-content">


        <div class="split-top">
            <div class="centered">
                <h2>This is the split-top</h2>
                <p>Some text.</p>
            </div>
        </div>

        <div class="split-bottom-left">
            <div class="centered">
                <img src="img_avatar.png" alt="Avatar man">
                <h2>This is the left split-bottom-left</h2>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>

            </div>
        </div>
        <div class="split-bottom-right">
            <div class="centered">
                <img src="img_avatar.png" alt="Avatar man">
                <h2>This is the right split-bottom-right</h2>
                <p>Some text here too.</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>

            </div>
        </div>
    </div>

    <script src="https://unpkg.com/[email protected]/dist/boxicons.js"></script>

</body>

</html>

css window resize responsive
1个回答
0
投票

我建议固定两个主面板的位置,然后在

member-content
面板内设置一个用于管理卡片的网格。

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@500&display=swap');

body {
  font-family: Work Sans, sans-serif; 
}

.side-bar-left {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 200px;
  background-color: #2b479a;
  color: white;
  padding: 20px;
}

.side-bar-left nav {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.side-bar-left nav a {
  color: inherit;
  text-decoration: none;
}

.member-content {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 200px;
  right: 0;
  background-color: #f1f3f7;
  display: grid;
  grid-template-columns: 250px auto;
  grid-template-rows: 1fr 2fr;
  gap: 1em;
  padding: 1em;
}

.member-content>* {
  padding: 20px;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
  border-radius: 25px;
  overflow: auto;
}

.member-content>*>*:first-child {
  margin-top: 0;
}

.member-content>*>*:last-child {
  margin-bottom: 0;
}

.member-content .split-top {
  grid-column: 1 / span 2;
}
<div class="side-bar-left">
  <nav>
    <a href="">Products</a>
    <a href="">Product Detail</a>
    <a href="">Orders</a>
    <a href="">See my portfolio</a>
  </nav>
</div>

<div class="member-content">

  <div class="split-top">
    <h2>This is the split-top</h2>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
  </div>

  <div class="split-bottom-left">
    <h2>This is the left split-bottom-left</h2>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
  </div>

  <div class="split-bottom-right">
    <h2>This is the right split-bottom-right</h2>
    <p>Some text here too.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quibusdam quaerat suscipit consequuntur maiores commodi omnis voluptatibus fugiat repellat nemo, maxime explicabo architecto nostrum officia, quisquam dignissimos deserunt perferendis soluta!</p>
  </div>
</div>

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.