Question

我正在ASP.NET中创建一个Web应用程序。该页面使用Master并且只有两件事 1.底部的GridView 2.顶部的DIV，我将进一步发展

这个想法是让顶部div或标题固定/冻结，这样当用户向下滚动时顶部保持其位置或换句话说总是浮在顶部

这是我到目前为止所拥有的

    <div class='fixed header'>

</div>

<%--<div class='fixed side'></div>--%>

<div class='scrollable'>
    <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="RecordID" DataSourceID="History">
        <Columns>
        </Columns>
    </asp:GridView>
</div>

CSS

.scrollable {
    height: 100%;
    width: 100%;
    margin: 10% auto 0 auto;
    border: 1px dashed black;
    position:relative;
}

.fixed {
  position: fixed;
}

.header{
  top: 0;
  left: 0;
  right: 0;
  width:100%;
  min-height: 100px;
  background-color: white;
  top:auto;
}

.side {
  top: 0;
  left: 0;
  bottom: 0;
  width: 50px;
  background-color: red;
}


.controlPanel{
    width:100%;
    height:100%;
    position:relative;
}

但是如果我调整窗口大小，网格会重叠顶部div。

我需要网格始终显示在顶部的白色块下。

我知道我可以添加顶部或边距，但可能无法自动调整到div尺寸。

这是我需要帮助的地方。

Answer 1

无需将 .header css类更正为

.header
 {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  min-height: 100px;
  background-color: white;
  z-index: 1;
 }

HTML动态/响应元素定位

1 个答案: