Question

我有这样的页面

\documentclass[a4paper,10pt]{article}

%A Few Useful Packages
\usepackage{marvosym}
\usepackage{fontspec}                   %for loading fonts
\usepackage{xunicode,xltxtra,url,parskip}   %other packages for formatting
\RequirePackage{color,graphicx}
\usepackage[usenames,dvipsnames]{xcolor}
\usepackage[big]{layaureo}              %better formatting of the A4 page
% an alternative to Layaureo can be ** \usepackage{fullpage} **
\usepackage{supertabular}               %for Grades
\usepackage{titlesec}                   %custom \section
\usepackage{supertabular}

%Styling Itemizations
\usepackage{enumitem}
\setlist{nolistsep}
\setitemize[1]{labelindent=\parindent, label=$\triangleright$}

%Setup hyperref package, and colours for links
\usepackage{hyperref}
\definecolor{linkcolour}{rgb}{0,0.2,0.6}
\hypersetup{colorlinks,breaklinks,urlcolor=linkcolour, linkcolor=linkcolour}

%FONTS
\defaultfontfeatures{Mapping=tex-text}
\setmainfont[SmallCapsFont = Fontin SmallCaps]{Fontin}

\titleformat{\section}{\Large\scshape\raggedright}{}{0em}{}[\titlerule]
\titlespacing{\section}{0pt}{3pt}{3pt}
%Tweak a bit the top margin
\addtolength{\voffset}{-1.3cm}

该部分的高度为100vh

<html>
  <body>
    <section id="the-view-port">

在Chrome（版本73.0.3683.86（官方内部版本）（64位））中，该窗口下方的内容如下。如果我右键单击该部分并进行检查，我将进入html标签。

html标记下面是什么？我该如何摆脱呢？

嗯，是的，还有更多可能与之相关的CSS。

#the-view-port { height: 100vh; }

Answer 1

按用户代理样式表在正文上是否留有边距？

<html>
    <head>
    <style>
        html {
            box-sizing: border-box;
            
            flex-direction: column;
            flex-wrap: nowrap;
        }
        body {
            display: flex;
            margin: 0;  
        }
    </style>
    </head>
  <body>
    <section style="height: 100vh;" id="the-view-port">
    </section>
    </body>
</html>

<html>
    <head>
    <style>
        html {
            box-sizing: border-box;
            
            flex-direction: column;
            flex-wrap: nowrap;
        }
        body {
            display: flex;  
        }
    </style>
    </head>
  <body>
    <section style="height: 100vh;" id="the-view-port">
    </section>
    </body>
</html>

Answer 2

我回答自己只是为了清理一下。奇怪的行为是由内部div上的ProcessEngine processEngine = ProcessEngineConfiguration .createStandaloneProcessEngineConfiguration() .buildProcessEngine();引起的。更改为height: inherit可以解决此问题。

我不清楚为什么点击“溢出”部分会导致我进入html标签。

参加这个小测验让我想起了这个陷阱：

https://css-tricks.com/how-well-do-you-know-css-layout/

什么比html标签大？

2 个答案: