javascript - 如何在反应中设置侧边栏和内容高度?
问题描述
我正在用 reactJs 制作一个简单的网页。它仍然没有功能,但在我想要设计和架构它之前。我在设计它时遇到问题。目前它看起来像这样https://ibb.co/4TCRwTY但是当我向下滚动时它看起来像这样https://ibb.co/kJC3p9q我如何使它如此侧边栏和内容行并排,而且他们也没有' t 重叠页眉/页脚。此外,当向下滚动时,我希望侧边栏一直滚动到其内容的内容。我知道颜色看起来很荒谬,但它们是为了在视觉上区分组件。对于这个简单的网页,常规 HTML/CSS(如 flexbox)是更好的选择,还是我应该考虑使用纯 reactjs 组件?任何帮助将不胜感激。谢谢
应用程序.css
html, body {
width: 100%;
height: 100%;
background: orange;
}
.sidenav {
float:left;
width:20%;
height: 100vh;
background:darkslategray;
overflow-x: hidden;
padding-top: 60px;
}
.sidenav p {
padding-left: 45px;
text-decoration: none;
font-size: 20px;
color: white;
}
.sidenav p:hover {
color: blue;
}
.contents {
height: 100vh;
/* float:left; */
padding: 60px 10px 60px 30px;
background: gray;
align-items:center;
}
img {
width: 800px;
height: 1000px;
margin-left: 80px;
}
header {
position:fixed;
width:100%;
top:0px;
background:darkslateblue;
text-align: end;
padding: 10px 20px 10px 0px;
/* margin-bottom: 0!important; */
}
footer {
position: fixed;
width: 100%;
bottom: 0;
background: darkslateblue;
text-align: end;
padding: 10px 20px 10px 0px;
}
h3 {
text-align: center;
font-size: 1.4em;
margin: 0px auto;
padding: 0px 0px 5px 0px;
}
应用程序.js
class App extends Component {
constructor() {
super();
}
render() {
return (
<>
<Header/>
<Sidebar/>
<Footer/>
</>
);
}
}
export default App;
侧边栏.jsx
const Sidebar = () => {
return (
<Router>
<div className="sidenav">
<Link to="/"><p>First Blog</p></Link>
<Link to="/"><p>First Blog</p></Link>
<Link to="/"><p>First Blog</p></Link>
<Link to="/"><p>First Blog</p></Link>
<Link to="/"><p>First Blog</p></Link>
<Link to="/"><p>First Blog</p></Link>
</div>
<div className="contents">
<Switch>
<Route exact path="/">
<BlogContents/>
</Route>
</Switch>
</div>
</Router>
);
}
博客内容.jsx
function BlogContents() {
return (
<>
<h3>My Recent Trip</h3>
<p>blablaa
janjnkjadn
nacndcjds
j cjdcscsdc
rfcscndcvnsj
amns am dasd
s cweurbfskjdncsknjc!jknckjnvkerjnvejvnernvernvfjnv,
fv mc mdf cdf fd nd csdc dewd wedwedwedew aknxjanc
</p>
<img src="https://images.unsplash.com/photo-1560214482-85e7339701c5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=902&q=80"/>
</>
);
}
页脚.jsx
function Footer() {
return (
<footer>
This is Footer
</footer>
);
}
页眉.jsx
function Header() {
return (
<header> Home | Contact </header>
);
}
解决方案
Flexbox 非常适合您的网站,而且在我看来是最适合的。如果可能的话,我也会避免使用100vh
你的身高。这会将高度设置为加载时屏幕的视图高度,而不是整个页面的高度(如果它可滚动超出屏幕高度)。
如果您希望侧边栏占据页面的整个高度,您可以将其设置为window.outerHeight
. 下面的例子:
const Sidebar = () => {
// Variable to get window view height
const viewHeight = window.outerHeight;
return (
<Router>
// added the style to the div, the .sidenav style will still work from your app.css sheet as well
<div style={{ height: viewHeight }} className="sidenav">
<Link to="/"><p>First Blog</p></Link>
<Link to="/"><p>First Blog</p></Link>
<Link to="/"><p>First Blog</p></Link>
<Link to="/"><p>First Blog</p></Link>
<Link to="/"><p>First Blog</p></Link>
<Link to="/"><p>First Blog</p></Link>
</div>
<div className="contents">
<Switch>
<Route exact path="/">
<BlogContents/>
</Route>
</Switch>
</div>
</Router>
)};
对于您的img
,您会希望其宽度为 %,因此它将针对不同的屏幕尺寸进行调整。您只需要给出img
一个宽度,高度将根据图像的纵横比自动创建。我还会设置一个max-width
来控制图像不占据更大屏幕上的屏幕。为您尝试以下代码img
:
img {
width: 50%;
max-width: 400px;
margin-left: 80px;
}
推荐阅读
- javascript - 每次编译时输出不同
- hadoop - 实现预期输出所需的 talend 组件
- typescript - 如何定义具有可选类型的自引用可扩展接口?
- amazon-web-services - 修改 Terraform 中的简单列表/数组
- android - Android 通知图标被绿色 android 图标取代,并且它不振动
- informix - 如何在informix 中创建具有BLOB 数据类型列的表?
- html - 如何在 CSS 中重新定位响应式导航
- asp.net-core - .NET MVC Core SendGrid 电子邮件验证不起作用
- maven - Maven-3.3.9 总是从远程而不是从本地拉依赖
- c# - email =null 和 VerifiedEmail=false 谷歌访问令牌