在粘性导航的CSS网格设计中需要帮助

Question

我坚持使用CSS网格

我想制作一个网页，

• 粘性导航（带有// ... using Telerik.Reporting; using Telerik.Reporting.Processing; // ... void ExportToPDF(string reportToExport) { // all my reports are in trdx format - detect file type and use unpackage below for trdp files. string currPath = HttpRuntime.AppDomainAppPath; // get the full path so deserialise works reportToExport = currPath + @"Reports\" + reportToExport; // add folder and report name to path UriReportSource uriReportSource = new UriReportSource { Uri = reportToExport }; // compressed to 1 line for brevity Telerik.Reporting.Report myReport = DeserializeReport(uriReportSource); // extract report from xml format (trdx) // Filters are client side (use params for server side) Here we work with the report object. // set meaningful field name and values for your code, maybe even pass in as params to this function... myReport.Filters.Add("UserId", FilterOperator.Equal , "1231"); var instanceReportSource = new Telerik.Reporting.InstanceReportSource(); // report source instanceReportSource.ReportDocument = myReport; // Assigning Report object to the InstanceReportSource // kinda optional, lots of examples just used null instead for deviceInfo System.Collections.Hashtable deviceInfo = new System.Collections.Hashtable(); // set any deviceInfo settings if necessary ReportProcessor reportProcessor = new ReportProcessor(); // will do work RenderingResult result = reportProcessor.RenderReport("PDF", instanceReportSource, deviceInfo); // GO! if (!result.HasErrors) { this.Response.Clear(); this.Response.ContentType = result.MimeType; this.Response.Cache.SetCacheability(HttpCacheability.Private); this.Response.Expires = -1; this.Response.Buffer = true; this.Response.BinaryWrite(result.DocumentBytes); this.Response.End(); } else { Exception[] ex = result.Errors; throw new Exception(ex[0].Message); } } Telerik.Reporting.Report DeserializeReport(UriReportSource uriReportSource) { var settings = new System.Xml.XmlReaderSettings(); settings.IgnoreWhitespace = true; using (var xmlReader = System.Xml.XmlReader.Create(uriReportSource.Uri, settings)) { var xmlSerializer = new Telerik.Reporting.XmlSerialization.ReportXmlSerializer(); var report = (Telerik.Reporting.Report)xmlSerializer.Deserialize(xmlReader); return report; } } Telerik.Reporting.Report UnpackageReport(UriReportSource uriReportSource) { var reportPackager = new ReportPackager(); using (var sourceStream = System.IO.File.OpenRead(uriReportSource.Uri)) { var report = (Telerik.Reporting.Report)reportPackager.UnpackageDocument(sourceStream); return report; } } ）
• 全屏“场景”（它们占用了导航器下的剩余空间）。

所以导航的高度和内容应为100vh

所以在每个场景中，最高的〜10％是导航，其余的是内容

这是一个蓝图

如果有人能帮助我，我将不胜感激

一个好的css-grid教程对我来说也足够了：）

Answer 1

如果将来有其他人观看

MINIMAL

在粘性导航上

main
    display: grid
    grid-template-rows: auto // height of nav
    grid-auto-rows: 100vh // fullscreen scenes