如何动态设置侧边栏高度，使其填满整个屏幕。
body, html, .exit-intent-container {
height: 100%;
font-family: "gothamBook"
}
.hidden {
display: none !important;
}
.fa-angle-down {
margin-left: 10px
}
.sidebar {
position:absolute;
left: 0;
top: 0;
bottom: 0;
width: 22%;
height: 170%;
background: #eee;
z-index: 1;
}
.sidebar ul {
margin-left: -20px;
}
.exit-intent-header {
padding-left: 20px;
}
.exit-intent-container {
display: flex;
align-items: center;
justify-content: center;
}
.content-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000;
opacity: .5;
z-index: 0;
transition: all .3s ease-out;
}
.exit-intent-header-wrapper {
padding: 1px 0 1px 0;
}
.exit-intent-wrapper {
position: relative;
background: no-repeat;
background-size: cover !important;
background-position: center !important;
z-index: 1;
background-color: #ffffff;
}
.exit-intent-inner {
height: 100%;
padding: 20px;
} <!-- Sidebar -->
<div class="sidebar">
<ul style="list-style-type: none;">
<form id="sideBarForm">
<li class="sidebar-category">
<strong>Layout</strong> <i class="fa fa-angle-down"></i>
</li>
<ul style="list-style-type: none;" class="collapse">
<li>
Background:
<ul style="list-style-type: disc;">
<li>
Image: <input type='file' id='getval' name="bgImage" />
</li>
<li>
color:
<!-- {
input:document.querySelector(".exitIntentWidth"),
changeSelector:'.exit-intent-wrapper',
cssProperty:'width',
pixels:true
}, -->
<input type="color" class="backgroundColor" value="#ffffff" name="bgColor" onchange="changeStyling({input:this, changeSelector:'.exit-intent-wrapper', cssProperty:'background', pixels:false})" id="primary_color" class="field-radio">
</li>
</ul>
<br/>
</li>
<li>
Exit intent width:
<br>
<input type="text" class="exitIntentWidth" name="width" value="450" onchange="changeStyling({input:this, changeSelector:'.exit-intent-wrapper', cssProperty:'width', pixels:true})">
<br>
</li>
<li>
Exit intent Height:
<br>
<input type="text" class="exitIntentHeight" name="height" value="450" onchange="changeStyling({input:this, changeSelector:'.exit-intent-wrapper', cssProperty:'height', pixels:true})">
<br>
</li>
<li>
Font-family:
<br>
<select class="exitIntentFontFamily" name="fontFamily" onchange="changeStyling({input:this, changeSelector:'.exit-intent-wrapper', cssProperty:'fontFamily', pixels:false})">
<option value="abel">Abel</option>
<option value="alegreya">Alegreya</option>
<option value="arvo">Arvo</option>
<option value="dosis">Dosis</option>
<option value="gothamBlack">Gotham Black</option>
<option value="gothamBook">Gotham Book</option>
<option value="gothamMedium">Gotham Medium</option>
<option value="openSans">Open Sans</option>
<option value="oswald">Oswald</option>
<option value="playfair">Playfair</option>
<option value="titillium_web">Tititlium</option>
<option value="yellowTail">Yellow Tail</option>
</select>
</li>
<li>
Close btn type:
<br>
<select class="exitIntentFontFamily exitIntentCloseBtn" name="closeBtn" onchange="changeCloseBtn(this)">
<option value="close-btn-one">Type 1</option>
<option value="close-btn-two">Type 2</option>
</select>
<br>
</li>
<li>
Insert image:<br><input type='file' id='getimgval' name="bgImage" /><br>
image width: <br><input type='text' class='imgWidth' onchange="changeStyling({input:this, changeSelector:'.layoutImg', cssProperty:'width', pixels:true})"/><br>
position: <br>
<select class="imagePosition" name="imgPos" onchange="changeImgPosition(this)">
<option value="bottom-left">Bottom left</option>
<option value="bottom-right">Bottom right</option>
<option value="upper-right">Upper right</option>
<option value="upper-left">Upper left</option>
<option value="inline">Inline</option>
<option value="on-top">On top of each other</option>
</select>
</li>
</ul>
<li class="sidebar-category">
<strong>Text</strong> <i class="fa fa-angle-down"></i>
</li>
<ul style="list-style-type: none;" class="collapse">
<li>
Header background color:
<input type="color" class="headerBGColor" name="headerBGColor" onchange="changeStyling({input:this, changeSelector:'.exit-intent-header-wrapper', cssProperty:'backgroundColor', pixels:false})" id="primary_color" class="field-radio"> </li>
<li>
Header:
<br>
<input type="text" class="exitIntentHeader" name="headerText" value="Header" onchange="changeText(this, '.exit-intent-header')">
<input type="color" class="headerColor" name="headerColor" onchange="changeStyling({input:this, changeSelector:'.exit-intent-header', cssProperty:'color', pixels:false})" id="primary_color" class="field-radio">
<br>
</li>
<li>
Header underline
<label class="switch">
<input type="checkbox" id="underlineText" name="headerUnderline" onchange="setUnderline()">
<span class="slider round"></span>
</label>
</li>
<li>
Header font-size:
<br>
<input type="number" class="exitIntentHeaderFontSize" name="headerFontSize" onchange="changeStyling({input:this, changeSelector:'.exit-intent-header', cssProperty:'fontSize', pixels:true})">
<br>
</li>
<li>
Description:
<br>
<textarea type="text" class="exitIntentDescription" name="descriptionText" value="Register now to be the first to get all the updates" onchange="changeText(this, '.description')"></textarea>
<br>
</li>
<li>
Description color:
<input type="color" class="descriptionColor" name="descriptionTextColor" onchange="changeStyling({input:this, changeSelector:'.description', cssProperty:'color', pixels:false})" id="primary_color" class="field-radio">
</li>
<li>
Font-size:
<br>
<input type="number" class="exitIntentFontSize" name="fontSize" value="17" onchange="changeStyling({input:this, changeSelector:'.exit-intent-inner', cssProperty:'fontSize', pixels:true})">
<br>
</li>
<li>
Font-alignment:
<br>
<select class="exitIntentFontFamily exitIntentAlignment" name="fontAlignment" onchange="changeFontAlignment(this)">
<option value="left">left</option>
<option value="middle">middle</option>
<option value="right">right</option>
</select>
</li>
</ul>
<li class="sidebar-category">
<strong>Spacing & Border-radius</strong> <i class="fa fa-angle-down"></i>
</li>
<ul style="list-style-type: none;" class="collapse">
<li>
Padding-Exit intent:
<br>
<input type="number" class="exitIntentPaddingAll" name="padding" value="0" onchange="changeStyling({input:this, changeSelector:'.exit-intent-wrapper', cssProperty:'padding', pixels:true})">
</li>
<li>
Padding-body All:
<br>
<input type="number" class="exitIntentPadding" name="paddingBody" value="0" onchange="changeStyling({input:this, changeSelector:'.exit-intent-inner', cssProperty:'padding', pixels:true})">
</li>
<li>
Padding-body top:
<br>
<input type="number" class="exitIntentPadding" name="paddingBody" value="0" onchange="changeStyling({input:this, changeSelector:'.exit-intent-inner', cssProperty:'paddingTop', pixels:true})">
</li>
<li>
Padding-body left:
<br>
<input type="number" class="exitIntentPaddingLeft" name="paddingLeft" value="20" onchange="changeStyling([{input:this, changeSelector:'.exit-intent-inner', cssProperty:'paddingLeft', pixels:true},{input:this, changeSelector:'.exit-intent-header', cssProperty:'paddingLeft', pixels:true}])">
</li>
<li>
Padding-body right:
<br>
<input type="number" class="exitIntentPaddingRight" name="paddingRight" value="0" onchange="changeStyling([{input:this, changeSelector:'.exit-intent-inner', cssProperty:'paddingRight', pixels:true},{input:this, changeSelector:'.exit-intent-header', cssProperty:'paddingRight', pixels:true}])">
</li>
<li>
Margin top form body (Input & Btn):
<br>
<input type="number" class="formMargin" value="70" name="margin" onchange="changeStyling({input:this, changeSelector:'.exit-intent-body', cssProperty:'marginTop', pixels:true})">
</li>
<li>
Body border radius:
<br>
<input type="number" class="exitIntentRadius" name="borderRadius" value="0" onchange="changeStyling({input:this, changeSelector:'.exit-intent-wrapper', cssProperty:'borderRadius', pixels:true})">
</li>
</ul>
<li class="sidebar-category">
<strong>Form</strong> <i class="fas fa-angle-down"></i>
</li>
<ul style="list-style-type: none;" class="collapse">
<li>
How many input fields?
<br>
<input type="number" value="2" class="inputQuantity" name="inputNumber" onchange="calculateInputs()" min="1" max="5">
<div class="formFieldInputs"></div>
<div class="btnAddinputs"></div>
</li>
<li>
Type of form (presets):
<br>
<select class="exitIntentForm" name="typeOfForm" onchange="changeForm()">
<option value="onTop" selected>on top of each other</option>
<option value="inline">inline</option>
</select>
</li>
<li>
Button text:
<br>
<input type="text" class="btnText" name="btnText" value="Inschrijven" onchange="changeText(this, '.button')">
<input type="color" class="btnTextColor" onchange="changeStyling({input:this, changeSelector:'.button', cssProperty:'color', pixels:false})" id="primary_color" class="field-radio" value="#ffffff">
</li>
<li>
Button width:
<br>
<input type="number" class="btnWidth" name="btnWidth" value="300" onchange="changeStyling({input:this, changeSelector:'.button', cssProperty:'width', pixels:true})">
</li>
<li>
Button height:
<br>
<input type="number" class="btnHeight" name="btnHeight" value="40" onchange="changeStyling({input:this, changeSelector:'.button', cssProperty:'height', pixels:true})">
</li>
<li>
Button color:
<br>
<input type="color" class="btnColor" name="btnColor" onchange="changeStyling({input:this, changeSelector:'.button', cssProperty:'backgroundColor', pixels:false})" id="primary_color" class="field-radio" value="#00CABA">
</li>
<li>
Button radius:
<br>
<input type="number" class="btnRadius" name="btnRadius" value="0" onchange="changeStyling({input:this, changeSelector:'.button', cssProperty:'borderRadius', pixels:true})">
</li>
<li>
Add privacy policy
<label class="switch">
<input type="checkbox" value="yes" class="privacyPolicy" name="privacyPolicy" onchange="showPrivacyPolicy()">
<span class="slider round"></span>
</label>
</li>
<li class="anchorlinks"></li>
</ul>
<li class="sidebar-category">
<strong>Exit intent html</strong>
</li>
<li>
<textarea cols="35" rows="10" class="html-viewer"></textarea>
</li>
<li>
<button type="button" class="btn-save btn-first" onclick="saveSettings()">Save settings</button>
<button type="button" class="btn-first" onclick="getHtml()">Get exit-intent html</button>
</li>
</form>
</ul>
</div>
<!-- Exit Intent -->
<div class="exit-intent-container" style="margin-left: 20%;">
<div class="content-overlay" style="position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: #000; opacity: .5;"></div>
<div class="exit-intent-wrapper">
<span class="close-btn" onclick="closeExitIntent()"></span>
<div class="exit-intent-content-wrapper">
<div class="exit-intent-header-wrapper">
<h1 class="column exit-intent-header">Test</h1>
</div>
<div class="exit-intent-inner" style="font-size: 24px;">
<p class="column description">Register now to be the first to get all the updates</p>
<div class="exit-intent-body">
<div class="column">
<form action="" class="form">
<div class="inner-form">
<div class="row">
<div class="column">
<input type="text" placeholder="email" class="email-input">
</div>
</div>
</div>
<div class="row">
<div class="column">
<button class="button"></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：1)
尝试将身高更改为100vh＆＃39;添加溢出：auto，position：fixed，这应该是这样的：
body, html, .exit-intent-container {
height: 100%;
font-family: "gothamBook"
}
.hidden {
display: none !important;
}
.fa-angle-down {
margin-left: 10px
}
.sidebar {
position:fixed;
left: 0;
top: 0;
bottom: 0;
width: 22%;
height: 100vh;
background: #eee;
overflow: auto;
z-index: 1;
}
.sidebar ul {
margin-left: -20px;
}
.exit-intent-header {
padding-left: 20px;
}
.exit-intent-container {
display: flex;
align-items: center;
justify-content: center;
}
.content-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000;
opacity: .5;
z-index: 0;
transition: all .3s ease-out;
}
.exit-intent-header-wrapper {
padding: 1px 0 1px 0;
}
.exit-intent-wrapper {
position: relative;
background: no-repeat;
background-size: cover !important;
background-position: center !important;
z-index: 1;
background-color: #ffffff;
}
.exit-intent-inner {
height: 100%;
padding: 20px;
} <!-- Sidebar -->
<div class="sidebar">
<ul style="list-style-type: none;">
<form id="sideBarForm">
<li class="sidebar-category">
<strong>Layout</strong> <i class="fa fa-angle-down"></i>
</li>
<ul style="list-style-type: none;" class="collapse">
<li>
Background:
<ul style="list-style-type: disc;">
<li>
Image: <input type='file' id='getval' name="bgImage" />
</li>
<li>
color:
<!-- {
input:document.querySelector(".exitIntentWidth"),
changeSelector:'.exit-intent-wrapper',
cssProperty:'width',
pixels:true
}, -->
<input type="color" class="backgroundColor" value="#ffffff" name="bgColor" onchange="changeStyling({input:this, changeSelector:'.exit-intent-wrapper', cssProperty:'background', pixels:false})" id="primary_color" class="field-radio">
</li>
</ul>
<br/>
</li>
<li>
Exit intent width:
<br>
<input type="text" class="exitIntentWidth" name="width" value="450" onchange="changeStyling({input:this, changeSelector:'.exit-intent-wrapper', cssProperty:'width', pixels:true})">
<br>
</li>
<li>
Exit intent Height:
<br>
<input type="text" class="exitIntentHeight" name="height" value="450" onchange="changeStyling({input:this, changeSelector:'.exit-intent-wrapper', cssProperty:'height', pixels:true})">
<br>
</li>
<li>
Font-family:
<br>
<select class="exitIntentFontFamily" name="fontFamily" onchange="changeStyling({input:this, changeSelector:'.exit-intent-wrapper', cssProperty:'fontFamily', pixels:false})">
<option value="abel">Abel</option>
<option value="alegreya">Alegreya</option>
<option value="arvo">Arvo</option>
<option value="dosis">Dosis</option>
<option value="gothamBlack">Gotham Black</option>
<option value="gothamBook">Gotham Book</option>
<option value="gothamMedium">Gotham Medium</option>
<option value="openSans">Open Sans</option>
<option value="oswald">Oswald</option>
<option value="playfair">Playfair</option>
<option value="titillium_web">Tititlium</option>
<option value="yellowTail">Yellow Tail</option>
</select>
</li>
<li>
Close btn type:
<br>
<select class="exitIntentFontFamily exitIntentCloseBtn" name="closeBtn" onchange="changeCloseBtn(this)">
<option value="close-btn-one">Type 1</option>
<option value="close-btn-two">Type 2</option>
</select>
<br>
</li>
<li>
Insert image:<br><input type='file' id='getimgval' name="bgImage" /><br>
image width: <br><input type='text' class='imgWidth' onchange="changeStyling({input:this, changeSelector:'.layoutImg', cssProperty:'width', pixels:true})"/><br>
position: <br>
<select class="imagePosition" name="imgPos" onchange="changeImgPosition(this)">
<option value="bottom-left">Bottom left</option>
<option value="bottom-right">Bottom right</option>
<option value="upper-right">Upper right</option>
<option value="upper-left">Upper left</option>
<option value="inline">Inline</option>
<option value="on-top">On top of each other</option>
</select>
</li>
</ul>
<li class="sidebar-category">
<strong>Text</strong> <i class="fa fa-angle-down"></i>
</li>
<ul style="list-style-type: none;" class="collapse">
<li>
Header background color:
<input type="color" class="headerBGColor" name="headerBGColor" onchange="changeStyling({input:this, changeSelector:'.exit-intent-header-wrapper', cssProperty:'backgroundColor', pixels:false})" id="primary_color" class="field-radio"> </li>
<li>
Header:
<br>
<input type="text" class="exitIntentHeader" name="headerText" value="Header" onchange="changeText(this, '.exit-intent-header')">
<input type="color" class="headerColor" name="headerColor" onchange="changeStyling({input:this, changeSelector:'.exit-intent-header', cssProperty:'color', pixels:false})" id="primary_color" class="field-radio">
<br>
</li>
<li>
Header underline
<label class="switch">
<input type="checkbox" id="underlineText" name="headerUnderline" onchange="setUnderline()">
<span class="slider round"></span>
</label>
</li>
<li>
Header font-size:
<br>
<input type="number" class="exitIntentHeaderFontSize" name="headerFontSize" onchange="changeStyling({input:this, changeSelector:'.exit-intent-header', cssProperty:'fontSize', pixels:true})">
<br>
</li>
<li>
Description:
<br>
<textarea type="text" class="exitIntentDescription" name="descriptionText" value="Register now to be the first to get all the updates" onchange="changeText(this, '.description')"></textarea>
<br>
</li>
<li>
Description color:
<input type="color" class="descriptionColor" name="descriptionTextColor" onchange="changeStyling({input:this, changeSelector:'.description', cssProperty:'color', pixels:false})" id="primary_color" class="field-radio">
</li>
<li>
Font-size:
<br>
<input type="number" class="exitIntentFontSize" name="fontSize" value="17" onchange="changeStyling({input:this, changeSelector:'.exit-intent-inner', cssProperty:'fontSize', pixels:true})">
<br>
</li>
<li>
Font-alignment:
<br>
<select class="exitIntentFontFamily exitIntentAlignment" name="fontAlignment" onchange="changeFontAlignment(this)">
<option value="left">left</option>
<option value="middle">middle</option>
<option value="right">right</option>
</select>
</li>
</ul>
<li class="sidebar-category">
<strong>Spacing & Border-radius</strong> <i class="fa fa-angle-down"></i>
</li>
<ul style="list-style-type: none;" class="collapse">
<li>
Padding-Exit intent:
<br>
<input type="number" class="exitIntentPaddingAll" name="padding" value="0" onchange="changeStyling({input:this, changeSelector:'.exit-intent-wrapper', cssProperty:'padding', pixels:true})">
</li>
<li>
Padding-body All:
<br>
<input type="number" class="exitIntentPadding" name="paddingBody" value="0" onchange="changeStyling({input:this, changeSelector:'.exit-intent-inner', cssProperty:'padding', pixels:true})">
</li>
<li>
Padding-body top:
<br>
<input type="number" class="exitIntentPadding" name="paddingBody" value="0" onchange="changeStyling({input:this, changeSelector:'.exit-intent-inner', cssProperty:'paddingTop', pixels:true})">
</li>
<li>
Padding-body left:
<br>
<input type="number" class="exitIntentPaddingLeft" name="paddingLeft" value="20" onchange="changeStyling([{input:this, changeSelector:'.exit-intent-inner', cssProperty:'paddingLeft', pixels:true},{input:this, changeSelector:'.exit-intent-header', cssProperty:'paddingLeft', pixels:true}])">
</li>
<li>
Padding-body right:
<br>
<input type="number" class="exitIntentPaddingRight" name="paddingRight" value="0" onchange="changeStyling([{input:this, changeSelector:'.exit-intent-inner', cssProperty:'paddingRight', pixels:true},{input:this, changeSelector:'.exit-intent-header', cssProperty:'paddingRight', pixels:true}])">
</li>
<li>
Margin top form body (Input & Btn):
<br>
<input type="number" class="formMargin" value="70" name="margin" onchange="changeStyling({input:this, changeSelector:'.exit-intent-body', cssProperty:'marginTop', pixels:true})">
</li>
<li>
Body border radius:
<br>
<input type="number" class="exitIntentRadius" name="borderRadius" value="0" onchange="changeStyling({input:this, changeSelector:'.exit-intent-wrapper', cssProperty:'borderRadius', pixels:true})">
</li>
</ul>
<li class="sidebar-category">
<strong>Form</strong> <i class="fas fa-angle-down"></i>
</li>
<ul style="list-style-type: none;" class="collapse">
<li>
How many input fields?
<br>
<input type="number" value="2" class="inputQuantity" name="inputNumber" onchange="calculateInputs()" min="1" max="5">
<div class="formFieldInputs"></div>
<div class="btnAddinputs"></div>
</li>
<li>
Type of form (presets):
<br>
<select class="exitIntentForm" name="typeOfForm" onchange="changeForm()">
<option value="onTop" selected>on top of each other</option>
<option value="inline">inline</option>
</select>
</li>
<li>
Button text:
<br>
<input type="text" class="btnText" name="btnText" value="Inschrijven" onchange="changeText(this, '.button')">
<input type="color" class="btnTextColor" onchange="changeStyling({input:this, changeSelector:'.button', cssProperty:'color', pixels:false})" id="primary_color" class="field-radio" value="#ffffff">
</li>
<li>
Button width:
<br>
<input type="number" class="btnWidth" name="btnWidth" value="300" onchange="changeStyling({input:this, changeSelector:'.button', cssProperty:'width', pixels:true})">
</li>
<li>
Button height:
<br>
<input type="number" class="btnHeight" name="btnHeight" value="40" onchange="changeStyling({input:this, changeSelector:'.button', cssProperty:'height', pixels:true})">
</li>
<li>
Button color:
<br>
<input type="color" class="btnColor" name="btnColor" onchange="changeStyling({input:this, changeSelector:'.button', cssProperty:'backgroundColor', pixels:false})" id="primary_color" class="field-radio" value="#00CABA">
</li>
<li>
Button radius:
<br>
<input type="number" class="btnRadius" name="btnRadius" value="0" onchange="changeStyling({input:this, changeSelector:'.button', cssProperty:'borderRadius', pixels:true})">
</li>
<li>
Add privacy policy
<label class="switch">
<input type="checkbox" value="yes" class="privacyPolicy" name="privacyPolicy" onchange="showPrivacyPolicy()">
<span class="slider round"></span>
</label>
</li>
<li class="anchorlinks"></li>
</ul>
<li class="sidebar-category">
<strong>Exit intent html</strong>
</li>
<li>
<textarea cols="35" rows="10" class="html-viewer"></textarea>
</li>
<li>
<button type="button" class="btn-save btn-first" onclick="saveSettings()">Save settings</button>
<button type="button" class="btn-first" onclick="getHtml()">Get exit-intent html</button>
</li>
</form>
</ul>
</div>
<!-- Exit Intent -->
<div class="exit-intent-container" style="margin-left: 20%;">
<div class="content-overlay" style="position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: #000; opacity: .5;"></div>
<div class="exit-intent-wrapper">
<span class="close-btn" onclick="closeExitIntent()"></span>
<div class="exit-intent-content-wrapper">
<div class="exit-intent-header-wrapper">
<h1 class="column exit-intent-header">Test</h1>
</div>
<div class="exit-intent-inner" style="font-size: 24px;">
<p class="column description">Register now to be the first to get all the updates</p>
<div class="exit-intent-body">
<div class="column">
<form action="" class="form">
<div class="inner-form">
<div class="row">
<div class="column">
<input type="text" placeholder="email" class="email-input">
</div>
</div>
</div>
<div class="row">
<div class="column">
<button class="button"></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
答案 1 :(得分：0)
只需为此更改您的css .sidebar：
.sidebar {
position:absolute;
left: 0;
top: 0;
bottom: 0;
width: 22%;
overflow: scroll;
background: #eee;
z-index: 1;
}
答案 2 :(得分：0)
要达到预期效果，请使用以下选项将侧边栏背景颜色更改为#eee和margin-bottom：0px;
.sidebar ul {
margin-left: -20px;
margin-bottom: 0px;
background: #eee;
}