如何放大页面而不在页面的父组件（主组件）中显示滚动

Question

我想构建一个看起来像窗口应用程序的页面。有一个问题，当我放大页面时，它会在主页上显示一个滚动条。 我将主页（父）的参数设置如下。 宽度：100vw， 高度：100vh

我应该怎么做才能滚动浏览主页内的组件（子组件）而不是主页（父组件）。 我把我的代码的 css 部分放在下面。

主页（父）的第一个 css 代码。我使用 Material-ui 进行样式设置。 root 是主页的类名。 header、breadCrumb 和 content 是我的子组件的 className。

const useStyles = makeStyles({

root: {
    width:'100vw',
    height: '100vh',
},

header: {
    height: '10%',
},

breadCrumb: {
    height: '10%',
},

content: {
    height: '80%',
}

});

内容组件也有自己的子项（侧边栏和内容），我将它们的 css 属性放在下面。

const useStyles = makeStyles({

root: {
    border: '1px solid blue', 
    display: 'flex',
    width:'auto',
    height: 'auto',
},

sidebar: {
    backgroundColor: 'orange',
    width: '20%',

    height: 'auto',
    border: '1px solid red',
    overflow: 'scroll'
},

content: {
    height: 'auto',
    width: '80%',
}

});

有什么我忘记设置的吗？如果可以的话，请指导我解决这个问题。

Answer 1

一般来说，你应该做这些项目...

1. 在您的页面（或更高的容器组件）中设置您的根目录：

height:"100vh" -> 这将填满整个屏幕。

1. 再次在该容器中，为您的子组件设置样式：

所有高度中的一些是 100%

1. 最后，在每个子组件中，高度必须为：

height: '100%' -> 适合页面

Answer 2

有关如何隐藏滚动条但保留 w3schools 的滚动功能的此页面可能会有所帮助： https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp

 /* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
} 

您可以将此应用到您的 .root 类（或 .css 文件中的 html 或 body）以在用户放大时隐藏根元素或页面上的滚动条。

如果你只想要例如要滚动的内容元素或侧边栏元素，您需要设置它们的高度。 auto 将调整高度以适应内容。尝试使用px 或vh 进行设置。

这里是我用一些选项制作的快速小提琴，用于如何在页面级别隐藏滚动条，但在侧边栏和内容元素中显示它：https://jsfiddle.net/bethylogism/b6nuehqg/246/

如果这不是您所了解的，请制作一个快速的 JS Fiddle 或 CodePen 您正在苦苦挣扎的功能。这将更容易诊断和帮助您。例如。我不是 100% 确定您所说的“窗口应用程序”是什么意思。

Answer 3

还好我解决了问题，我准备在这里分享一下。

正如我所说，我希望我的页面不被滚动，但它里面的组件应该通过放大来滚动。当我将主页的宽度和高度设置为 100vw 和 100vh 时，我可以用百分比给出其中组件的宽度和高度以使其适合页面。下面的代码是主页面的css。

我想构建一个看起来像窗口应用程序的页面。有一个问题，当我放大页面时，它会在主页上显示一个滚动条。我将主页（父）的参数设置如下。宽度：100vw，高度：100vh

我应该怎么做才能滚动浏览主页内的组件（子组件）而不是主页（父组件）。我把我的代码的 css 部分放在下面。

主页（父）的第一个 css 代码。我使用 Material-ui 进行样式设置。 root 是主页的类名。 header、breadCrumb 和 content 是我的子组件的 className。

const useStyles = makeStyles({

根：{

width:"100vw",
height:"100vh",

},

标题：{

height: "10%",
width: "100%",

},

面包屑：{

height: "10%",
width: "100%",

},

内容：{

height: "80%",
width: "100%"

}, });

内容组件的css代码由两个组件（侧边栏和内容）组成。

const useStyles = makeStyles({

根：{

display: "flex",
width:"100%",
height:"100%",

},

侧边栏：{

width: "20%",
height: "100%",
overflow: "auto",

},

内容：{

width: "80%",
height: "100%",
overflow: "auto",

},

});