即使我设置了媒体查询，当浏览器最小化时，网站也不会滚动?-CSS

Question

我刚刚花了很长时间来整理不同屏幕大小的所有媒体查询，然而，当我在笔记本电脑上最小化浏览器以占据一半屏幕时，我可以看到我的内容定位看起来很正确，但只有一半屏幕，没有垂直滚动的选项，这正是我想要的。

我很确定这与位置有关：容器中的相对位置，因为当我取下它时，我可以滚动，但屏幕上的所有内容都不合适。有人知道我问题的根源以及如何解决这个问题吗？到目前为止，这个问题一直没有成功。

代码如下，我还制作了一个代码沙盒，但我并不真的相信它，因为当我在本地主机浏览器上安装react应用程序时，它似乎会默认添加滚动(垂直和水平(。

(我正在使用React和样式化组件来应用css(

App.js

import './App.css';
import styled from 'styled-components'
import lantern from '../src/Assets/lantern.svg'
import wok from '../src/Assets/wok.svg'
import edges from '../src/Assets/edges.svg';
import { Grid } from '@material-ui/core';
function App() {
return (

<Container>
<Img />
<HalfCircle />
<HalfCircle1 />
<Title>
Authentic Asian Cuisine Delivered Straight To Your Door!
</Title>
<Wok/>
{/* <Edges/> */}
<HomeButton/>
<HomeButtonText>
Order Now!
</HomeButtonText>
</Container>

);
}
const Container = styled.div`

position: relative;
display: flex;
height: 100vh;
width: 100vw;
background: #FDFAF6;
overflow: hidden;


`;
const Img = styled.div`
background-image: url(${lantern});
background-position: center;
background-size: cover;
position: absolute;
width: 314px;
height: 328px;
left: 100px;
top: -11px;
@media (max-width: 1024px){
position: absolute;
width: 334px;
height: 358px;
left: 60px;
top: -11px;
}
/* Tablet (Ipad) */
@media (max-width: 768px){
position: absolute;
width: 274px;
height: 298px;
left: 5 0px;
top: -11px;
}
/* Large Phone (Iphone 6/7/8 plus) */
@media (max-width: 576px){
position: absolute;
width: 165px;
height: 176px;
left: 14px;
top: -11px;
}
/* Medium Phone (Iphone 6/7/8) */
@media (max-width: 376px){
position: absolute;
width: 155px;
height: 166px;
left: 14px;
top: -11px;
}
/* Small Phone (Iphone 5/SE) */
@media (max-width: 320px){
position: absolute;
width: 155px;
height: 146px;
left: 8px;
top: -11px;
}

`
const HalfCircle = styled.div`
position: absolute;
width: 430px;
height: 370px;
left: 1310px;
top: -136px;
border-radius: 50%;
box-shadow: 4px 7px #d1d9d9;
background: #E4EFE7;
@media (max-width: 1024px){
position: absolute;
width: 450px;
height: 460px;
left: 760px;
top: -136px;
border-radius: 50%;
box-shadow: 5px 10px #d1d9d9;
background: #E4EFE7;
}
/* Tablet (Ipad) */
@media (max-width: 768px){
position: absolute;
width: 430px;
height: 390px;
left: 600px;
top: -136px;
border-radius: 50%;
box-shadow: 4px 7px #d1d9d9;
background: #E4EFE7;
}
/* Large Phone (Iphone 6/7/8 Plus) */
@media (max-width: 576px){
position: absolute;
width: 299px;
height: 269px;
left: 253px;
top: -116px;
background: #E4EFE7;
}
/* Medium Phone (Iphone 6/7/8) */
@media (max-width: 376px){
position: absolute;
width: 299px;
height: 249px;
left: 253px;
top: -116px;
background: #E4EFE7;
}

/* Small Phone (Iphone 5/SE) */
@media (max-width: 320px){
position: absolute;
width: 299px;
height: 239px;
left: 208px;
top: -116px;
background: #E4EFE7;
}
/* Extra Small Device (Galaxy Fold) */
@media (max-width: 280px){
position: absolute;
width: 299px;
height: 249px;
left: 203px;
top: -116px;
background: #E4EFE7;
}

`
const HalfCircle1 = styled.div`
position: absolute;
width: 430px;
height: 370px;
left: -217px;
top: 507px;
border-radius: 50%;
box-shadow: 8px 5px #d1d9d9;
background: #E4EFE7;
/* Large Tablet */
@media (max-width: 1024px){
display: none;
}
/* Tablet */
@media (max-width: 768px){
display: none;
}
/* Mobile */
@media (max-width: 576px){
display: none;
}
`
const Title = styled.div`
position: absolute;

width: 553px;
height: 153px;
left: 505px;
top: 148px;
font-family: Rosario;
font-style: normal;
font-weight: normal;
font-size: 38px;
line-height: 60px;
text-align: center;
color: #000000;
@media (max-width: 1024px){
position: absolute;
width: 672px;
height: 141px;
left: 194px;
top: 404px;
font-family: Rosario;
font-style: normal;
font-weight: normal;
font-size: 44px;
line-height: 56px;
text-align: center;
color: #000000;
}
@media (max-width: 768px){
position: absolute;
width: 472px;
height: 141px;
left: 154px;
top: 304px;
font-family: Rosario;
font-style: normal;
font-weight: normal;
font-size: 42px;
line-height: 48px;
text-align: center;
color: #000000;
}
/* Large Phone (Iphone 6/7/8 Plus) */
@media (max-width: 576px){
position: absolute;
width: 352px;
height: 121px;
left: 24px;
top: 224px;
font-family: Rosario;
font-style: normal;
font-weight: normal;
font-size: 23px;
line-height: 32px;
text-align: center;
color: #000000;
}
/* Medium Phone (Iphone 6/7/8 ) */
@media (max-width: 376px){
position: absolute;
width: 352px;
height: 121px;
left: 22px;
top: 204px;
font-family: Rosario;
font-style: normal;
font-weight: normal;
font-size: 22px;
line-height: 27px;
text-align: center;
color: #000000;
}
/* Small Phone (Iphone 5/SE) */
@media (max-width: 320px){
position: absolute;
width: 292px;
height: 121px;
left: 12px;
top: 184px;
font-family: Rosario;
font-style: normal;
font-weight: normal;
font-size: 20px;
line-height: 30px;
text-align: center;
color: #000000;
}
/*Extra Small Device (Galaxy Fold) */
@media (max-width: 280px){
position: absolute;
width: 272px;
height: 121px;
left: 8px;
top: 184px;
font-family: Rosario;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 30px;
text-align: center;
color: #000000;
}
`
const Wok = styled.div`
background-image: url(${wok});
background-position: center;
background-size: cover;
position: absolute;
width: 434px;
height: 434px;
left: 867px;
top: 328px;
@media (max-width: 1024px){
position: absolute;
width: 450px;
height: 450px;
left: 295px;
top: 845px;
}
@media (max-width: 768px){
position: absolute;
width: 350px;
height: 350px;
left: 205px;
top: 645px;
}
/* Large Phone (Iphone 6/7/8 Plus) */
@media (max-width: 576px){
position: absolute;
width: 250px;
height: 250px;
left: 75px;
top: 465px;
}
/* Medium Phone (Iphone 6/7/8) */
@media (max-width: 376px){
position: absolute;
width: 220px;
height: 217px;
left: 75px;
top: 445px;
}
/* Small Phone (Iphone 5/SE) */
@media (max-width: 320px){
position: absolute;
width: 210px;
height: 207px;
left: 49px;
top: 385px;
}
/* Extra Small Device (Galaxy Fold) */
@media (max-width: 280px){
position: absolute;
width: 210px;
height: 207px;
left: 39px;
top: 385px;
}
`
const Edges = styled.div`
background-image: url(${edges});
background-position: center;
background-size: cover;
position: absolute;
width: 205px;
height: 205px;
left: 1376px;
top: 563px;
`
const HomeButton = styled.div`
position: absolute;
width: 369px;
height: 113px;
left: 345px;
top: 369px;
box-shadow: 2px 10px #d1d9d9;
background: #E4EFE7;
border-radius: 25px;
@media (max-width: 1024px){
position: absolute;
width: 381px;
height: 100px;
left: 327px;
top: 600px;
box-shadow: 4px 10px #d1d9d9;
background: #E4EFE7;
border-radius: 25px;
}
@media (max-width: 768px){
position: absolute;
width: 301px;
height: 80px;
left: 227px;
top: 485px;
box-shadow: 2px 7px #d1d9d9;
background: #E4EFE7;
border-radius: 25px;
}
/* Large Phone (Iphone 6/7/8 Plus) */
@media (max-width: 576px){
position: absolute;

width: 221px;
height: 57px;
left: 87px;
top: 335px;
box-shadow: 2px 7px #d1d9d9;
background: #E4EFE7;
border-radius: 25px;
}

/* Medium Phone (Iphone 6/7/8) */
@media (max-width: 376px){
position: absolute;

width: 221px;
height: 57px;
left: 75px;
top: 325px;
box-shadow: 2px 7px #d1d9d9;
background: #E4EFE7;
border-radius: 25px;
}
/* Small Phone (Iphone 5/SE) */
@media (max-width: 320px){
position: absolute;

width: 221px;
height: 57px;
left: 42px;
top: 285px;
box-shadow: 2px 7px #d1d9d9;
background: #E4EFE7;
border-radius: 25px;
}
/* Extra Small Device (Galaxy Fold) */
@media (max-width: 280px){
position: absolute;

width: 221px;
height: 57px;
left: 34px;
top: 285px;
box-shadow: 2px 7px #d1d9d9;
background: #E4EFE7;
border-radius: 25px;
}
`
const HomeButtonText = styled.div`
position: absolute;
width: 241px;
height: 46px;
left: 402px;
top: 403px;

font-family: Rosario;
font-style: normal;
font-weight: normal;
font-size: 36px;
line-height: 44px;
text-align: center;
color: #000000;
@media (max-width: 1024px){
position: absolute;
width: 186px;
height: 31px;
left: 426px;
top: 635px;
font-family: Rosario;
font-style: normal;
font-weight: normal;
font-size: 36px;
line-height: 27px;
text-align: center;
color: #000000;
}
/* Tablet */
@media (max-width: 768px){
position: absolute;
width: 186px;
height: 31px;
left: 286px;
top: 511px;
font-family: Rosario;
font-style: normal;
font-weight: normal;
font-size: 32px;
line-height: 27px;
text-align: center;
color: #000000;
}
/* Large Phone (Iphone 6/7/8 Plus) */
@media (max-width: 576px){
position: absolute;
width: 186px;
height: 31px;
left: 106px;
top: 349px;
font-family: Rosario;
font-style: normal;
font-weight: normal;
font-size: 22px;
line-height: 27px;
text-align: center;
color: #000000;
}
/* Medium Phone (Iphone 6/7/8) */
@media (max-width: 376px){
position: absolute;
width: 186px;
height: 31px;
left: 94px;
top: 339px;
font-family: Rosario;
font-style: normal;
font-weight: normal;
font-size: 22px;
line-height: 27px;
text-align: center;
color: #000000;
}
/* Small Phone (Iphone 5/SE) */
@media (max-width: 320px){
position: absolute;
width: 186px;
height: 31px;
left: 61px;
top: 299px;
font-family: Rosario;
font-style: normal;
font-weight: normal;
font-size: 22px;
line-height: 27px;
text-align: center;
color: #000000;
}
/* Extra Small Device (Galaxy Fold) */
@media (max-width: 280px){
position: absolute;
width: 186px;
height: 31px;
left: 53px;
top: 299px;
font-family: Rosario;
font-style: normal;
font-weight: normal;
font-size: 22px;
line-height: 27px;
text-align: center;
color: #000000;
}
`
export default App;

Answer 1

我认为您已经在Container中添加了overflow: hidden;。因此，您需要从容器中删除overflow: hidden。

const Container = styled.div`

position: relative;
display: flex;
height: 100vh;
width: 100vw;
background: #FDFAF6;
/* overflow: hidden;  <-- comment or remove this */  
`;

演示链接：

Answer 2

圆形包装器

您可以将半个圆环放入另一个包装容器中，该包装容器是主容器的第一个子容器，其高度和宽度设置为100%，并且overflow: hidden

代码被简化为相关部分：

export default function App() {
return (
<Container>
<Img />
<CirleWrapper>
<HalfCircle />
<HalfCircle1 />
</CirleWrapper>
<Title>Authentic Asian Cuisine Delivered Straight To Your Door!</Title>
<Wok />
{/* <Edges/> */}
<HomeButton />
<HomeButtonText>Order Now!</HomeButtonText>
</Container>
);
}
const Container = styled.div`
position: relative;
display: flex;
height: 100vh;
width: 100vw;
background: #fdfaf6;
`;
const CirleWrapper = styled.div`
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
`;
[...]
const HalfCircle = styled.div`
position: absolute;
width: 430px;
height: 370px;
left: 1310px;
top: -136px;
border-radius: 50%;
box-shadow: 4px 7px #d1d9d9;
background: #e4efe7;
@media (max-width: 1024px) {
[...]