Question

我用apache tile在页面顶部制作固定条。

但该栏与侧栏和内容层重叠。

我试图设置填充顶部。

但是固定的顶部栏的高度是可变的。

在固定顶部栏中设置填充顶部不合适。

页眉部分

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>


<header>
<nav
    class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow w-100">
    <a class="navbar-brand col-sm-3 col-md-2 mr-0"
        href="${pageContext.request.contextPath}/">Hae Cheol's Web</a> <input
        class="form-control form-control-dark col-md-8 w-100" type="text"
        placeholder="Search" aria-label="Search">



    <c:if test="${pageContext.request.userPrincipal.name ==null }">
        <div class="navbar-nav px-3 col-md-2">
            <a class="nav-link btn" style="text-align: left;"
                href="<c:url value="/login"/> ">Login </a>
        </div>
    </c:if>

    <c:if test="${pageContext.request.userPrincipal.name != null}">
        <div class="navbar-nav px-3 col-md-2">
            <c:if test="${pageContext.request.userPrincipal.name == 'admin'}">

                <a class="nav-link btn button-1" href="<c:url value="/admin"/>">AdminPage</a>

            </c:if>

            <a class="nav-link btn button-1"
                href="javascript:document.getElementById('logout').submit()">Logout</a>

            <form id="logout" action="<c:url value="/logout"/>" method="post">
                <input type="hidden" name="${_csrf.parameterName}"
                    value="${_csrf.token}" />
            </form>
        </div>
    </c:if>

</nav>

</header>

身体部位

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>


        <main role="main" style="margin-top:30px;" class="col-md-9 ml-sm-auto col-lg-10 px-4">
          <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
            <h1 class="h2">Dashboard</h1>
            <div class="btn-toolbar mb-2 mb-md-0">
              <div class="btn-group mr-2">
                <button class="btn btn-sm btn-outline-secondary">Share</button>
                <button class="btn btn-sm btn-outline-secondary">Export</button>
              </div>
              <button class="btn btn-sm btn-outline-secondary dropdown-toggle">
                <span data-feather="calendar"></span>
                This week
              </button>
            </div>
          </div>

<canvas class="my-4" id="myChart" width="900" height="380"></canvas>

<h2>Section title</h2>
<div class="table-responsive">
    <table class="table table-striped table-sm">
        <thead>
            <tr>
                <th>#</th>
                <th>Header</th>
                <th>Header</th>
                <th>Header</th>
                <th>Header</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1,001</td>
                <td>Lorem</td>
                <td>ipsum</td>
                <td>dolor</td>
                <td>sit</td>
            </tr>
            <tr>
                <td>1,002</td>
                <td>amet</td>
                <td>consectetur</td>
                <td>adipiscing</td>
                <td>elit</td>
            </tr>
            <tr>
                <td>1,003</td>
                <td>Integer</td>
                <td>nec</td>
                <td>odio</td>
                <td>Praesent</td>
            </tr>
            <tr>
                <td>1,003</td>
                <td>libero</td>
                <td>Sed</td>
                <td>cursus</td>
                <td>ante</td>
            </tr>
            <tr>
                <td>1,004</td>
                <td>dapibus</td>
                <td>diam</td>
                <td>Sed</td>
                <td>nisi</td>
            </tr>
            <tr>
                <td>1,005</td>
                <td>Nulla</td>
                <td>quis</td>
                <td>sem</td>
                <td>at</td>
            </tr>
            <tr>
                <td>1,006</td>
                <td>nibh</td>
                <td>elementum</td>
                <td>imperdiet</td>
                <td>Duis</td>
            </tr>
            <tr>
                <td>1,007</td>
                <td>sagittis</td>
                <td>ipsum</td>
                <td>Praesent</td>
                <td>mauris</td>
            </tr>
            <tr>
                <td>1,008</td>
                <td>Fusce</td>
                <td>nec</td>
                <td>tellus</td>
                <td>sed</td>
            </tr>
            <tr>
                <td>1,009</td>
                <td>augue</td>
                <td>semper</td>
                <td>porta</td>
                <td>Mauris</td>
            </tr>
            <tr>
                <td>1,010</td>
                <td>massa</td>
                <td>Vestibulum</td>
                <td>lacinia</td>
                <td>arcu</td>
            </tr>
            <tr>
                <td>1,011</td>
                <td>eget</td>
                <td>nulla</td>
                <td>Class</td>
                <td>aptent</td>
            </tr>
            <tr>
                <td>1,012</td>
                <td>taciti</td>
                <td>sociosqu</td>
                <td>ad</td>
                <td>litora</td>
            </tr>
            <tr>
                <td>1,013</td>
                <td>torquent</td>
                <td>per</td>
                <td>conubia</td>
                <td>nostra</td>
            </tr>
            <tr>
                <td>1,014</td>
                <td>per</td>
                <td>inceptos</td>
                <td>himenaeos</td>
                <td>Curabitur</td>
            </tr>
            <tr>
                <td>1,015</td>
                <td>sodales</td>
                <td>ligula</td>
                <td>in</td>
                <td>libero</td>
            </tr>
        </tbody>
    </table>
</div>
</main>


<!-- Graphs -->
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script>
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type : 'line',
        data : {
            labels : [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday",
                    "Friday", "Saturday" ],
            datasets : [ {
                data : [ 15339, 21345, 18483, 24003, 23489, 24092, 12034 ],
                lineTension : 0,
                backgroundColor : 'transparent',
                borderColor : '#007bff',
                borderWidth : 4,
                pointBackgroundColor : '#007bff'
            } ]
        },
        options : {
            scales : {
                yAxes : [ {
                    ticks : {
                        beginAtZero : false
                    }
                } ]
            },
            legend : {
                display : false,
            }
        }
    });
</script>

Answer 1

我认为您需要Javascript才能实现所需的功能。希望这会有所帮助。

document.onscroll = function() {
  /* When scrolled, set the header to position: fixed; */
  const header = document.getElementById("header");
  if (header.style.position !== "fixed") {
    header.style.position = "fixed";
    header.style.top = 0;
    /* Retrieve the height of the header and assign top margin to container */
    const headerHeight = header.clientHeight;
    document.getElementById("container").style.marginTop = headerHeight + "px";
  }
};

body {
  margin: 0;
}

header {
  width: 100%;
  height: 100px; /* This can be anything */
  background-color: blue;
}

#container {
  display: flex;
  width: 100%;
}

aside {
  background-color: green;
  width: 25%;
}

.content {
  background-color: lightblue;
  width: 75%;
  padding: 1rem;
}

<header id="header"></header>
<div id="container">
  <aside></aside>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

如何使长度可变的元素不与其他元素重叠？

1 个答案: