Question

我需要制作一个固定的网格布局，然后我将对其进行自定义，网页必须只有全屏高度并且不能是 V 可滚动的。

页面样机如下所示：

所以我试图通过使用这样的引导网格系统来归档它：

.content {
    background-color: rgb(0, 119, 255);
}

.content .dettagli {
    background-color: aquamarine;
}

.content .logo {
    height: 100px;
    background-color: rgb(255, 0, 0);
}

.content .action-bar {
    height: 200px;
    background-color: rgb(246, 255, 127);
}

.scontrino {
    background-color: rgb(255, 127, 127);
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <link rel="stylesheet" href="asssets/css/index.css">
</head>
  <body>

    <div class="container-fluid">

        <div class="row">
            <div class="col-sm-9 content">
                <div class="row">
                    <div class="col-sm-12 logo">

                    </div>
                    <div class="col-sm-12 dettagli">
                        
                    </div>
                    <div class="col-sm-12 action-bar">
                        
                    </div>
                </div>
            </div>
            <div class="col-sm-3 scontrino">
                
            </div>
        </div>


    </div>



  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script></body>
</html>

但实际上 row 和 colls 包裹了内容，所以没有显示，而我如何立即设置它们以覆盖整个页面？

logo col 应该只覆盖 100px 的高度，而 action-bar 应该是 200px...

编辑我正在尝试将 100% 高度设置为 dettagli，但它需要更多空间并且页面变得可滚动，而 100% 必须适合 .logo 和 .action-bar

<div class="container-fluid h-100">

    <div class="row h-100">
        <div class="col-sm-9 content">
            <div class="row h-100">
                <div class="col-sm-12 logo">
                    
                </div>
                <div class="col-sm-12 dettagli h-100">
                    
                </div>
                <div class="col-sm-12 action-bar">
                    
                </div>
            </div>
        </div>
        <div class="col-sm-3 scontrino">
            
        </div>
    </div>


</div>

Answer 1

这是我试图在评论中向您解释的示例。您不能在任何地方应用 % height，除非您从 html 开始。

这里有一个工作示例。我让你明白。

.content {
    background-color: rgb(0, 119, 255);
}
.height-fix-on-row{
    height:300px;
    /* You can try with different height as below
    height:20vh;
    height:20em;
    height:20rem;
    */
}
.content .dettagli {
    background-color: aquamarine;
}

.content .logo{
    background-color: rgb(255, 0, 0);
}

.content .action-bar {
    background-color: rgb(246, 255, 127);
}

.scontrino {
    background-color: rgb(255, 127, 127);
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <link rel="stylesheet" href="asssets/css/index.css">
</head>
  <body>

    <div class="container-fluid">

        <div class="row height-fix-on-row">
            <div class="col-sm-9 content h-100">
                <div class="row h-100">
                    <div class="col-sm-12 logo h-25">

                    </div>
                    <div class="col-sm-12 dettagli h-50">
                        
                    </div>
                    <div class="col-sm-12 action-bar h-25">
                        
                    </div>
                </div>
            </div>
            <div class="col-sm-3 scontrino h-100">
                
            </div>
        </div>


    </div>



  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script></body>
</html>

如何使用引导程序制作固定的网格布局？

1 个答案: