溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css中內(nèi)容出現(xiàn)滾動(dòng)時(shí)不影響布局解決辦法

發(fā)布時(shí)間：2020-07-24 09:34:11 來源：網(wǎng)絡(luò) 閱讀：807 作者：歆冉 欄目：web開發(fā)

最終我們需要的效果是:

css中內(nèi)容出現(xiàn)滾動(dòng)時(shí)不影響布局解決辦法

它的布局結(jié)構(gòu)式這樣的:

css中內(nèi)容出現(xiàn)滾動(dòng)時(shí)不影響布局解決辦法

代碼實(shí)現(xiàn)說明：

css中內(nèi)容出現(xiàn)滾動(dòng)時(shí)不影響布局解決辦法

完整代碼:

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title></title>
<style?type="text/css">
*{
margin:?0;
padding:?0;
box-sizing:?border-box;
}
.container{
width:?calc(450px?+?17px);
height:?400px;
background-color:?greenyellow;
overflow:?auto;
}
.container?.inner-container{
overflow:?hidden;
width:?450px;
background-color:?#ccc;
padding:?10px;
padding-bottom:?0px;
}
.container?.inner-container>div{
width:?100px;
height:?100px;
background-color:#D43F3A;
float:?left;
margin-right:?10px;
margin-bottom:?10px;
}
.container?.inner-container>div:nth-child(4n){
margin-right:?0;
}
</style>
</head>
<body>
<div?class="container">
<div?class="inner-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
</div>
</div>
</body>
</html>

另一種效果:

css中內(nèi)容出現(xiàn)滾動(dòng)時(shí)不影響布局解決辦法

它的布局結(jié)果是:

css中內(nèi)容出現(xiàn)滾動(dòng)時(shí)不影響布局解決辦法

代碼:

css中內(nèi)容出現(xiàn)滾動(dòng)時(shí)不影響布局解決辦法

完整代碼:

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title></title>
</head>
<body><!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title></title>
<style?type="text/css">
*{
margin:?0;
padding:?0;
box-sizing:?border-box;
}
.container{
width:?490px;
height:?400px;
background-color:?#ccc;
overflow:?auto;
overflow-x:?hidden;
}
.container?.inner-container{
width:?490px;
padding:?10px?30px;
}
.container?.inner-container>div{
width:?100px;
height:?100px;
background-color:#D43F3A;
float:?left;
margin-right:?10px;
margin-bottom:?10px;
}
.container?.inner-container>div:nth-child(4n){
margin-right:?0;
}
</style>
</head>
<body>
<div?class="container">
<div?class="inner-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
</div>
</div>
</body>
</html>
</body>
</html>



總結(jié):

1 通過加一個(gè)中間層來處理出現(xiàn)的滾動(dòng)條的影響

2 chrome下的滾動(dòng)條的寬度是17px

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手