GVKun编程网logo

HTML – 粘滞页脚与侧边栏无法正常工作（html页脚固定到底部）

19

对于想了解HTML–粘滞页脚与侧边栏无法正常工作的读者，本文将提供新的信息，我们将详细介绍html页脚固定到底部，并且为您提供关于forloop内部的内部html无法正常工作、html–CSSGrad

对于想了解HTML – 粘滞页脚与侧边栏无法正常工作的读者，本文将提供新的信息，我们将详细介绍html页脚固定到底部，并且为您提供关于forloop内部的内部html无法正常工作、html – CSS Gradient动画无法正常工作、html – CSS white-space nowrap无法正常工作、html – CSS3 ::选择选择器在锚标签上无法正常工作的有价值信息。

本文目录一览：

HTML – 粘滞页脚与侧边栏无法正常工作（html页脚固定到底部）

HTML – 粘滞页脚与侧边栏无法正常工作（html页脚固定到底部）

我想要一个CSS侧边栏和一个粘性页脚.当侧边栏滑出时,页面的其余部分应缩小以适应较小的空间.

我的问题是,当我打开菜单时,粘性页脚会滑动侧边病房.但它也需要缩小,但事实并非如此.它应该像其他内容一样水平放在页面上,但事实并非如此.这导致了我不想要的水平滚动条.

我该如何缩小页脚？

html,body {
  height: 100%;
  margin: 0;
  padding: 0;
}
footer {
  bottom: 0;
  margin-left: inherit;
  height: 100px;
  left: 0;
  width: 100%;
  position: absolute;
  background-color: lightgrey;
}
ul {
  margin-left: 0;
  padding-left: 0;
}
.footer-img {
  margin-top: 15px;
  margin-bottom: 15px;
  display: inline-block;
}
.page-wrap {
  Box-sizing: border-Box;
  min-height: 100%;
  position: relative;
  transition-duration: 0.4s;
}
.page-content {
  Box-sizing: border-Box;
  min-height: 100%;
  padding: 0 0 100px 0;
  transition-duration: 0.4s;
}
.sidebar {
  position: fixed;
  top: 0;
  left: -180px;
  right: 0;
  bottom: 0;
  width: 120px;
  padding: 30px;
  background-color: black;
  z-index: 0;
  transition-duration: 0.4s;
}
.sidebar li {
  color: white;
  font-size: 18px;
  margin-bottom: 15px;
}
.toggle {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1;
  color: white;
  transition-duration: 0.4s;
}
#sidebartoggler {
  display: none;
}
#sidebartoggler:checked + .page-wrap .sidebar {
  left: 0;
}
#sidebartoggler:checked + .page-wrap .toggle {
  left: 200px;
}
#sidebartoggler:checked + .page-wrap .page-content {
  margin-left: 180px;
}
<!doctype html>
<html lang="en">

<body>

  <input type="checkBox" id="sidebartoggler" name="" value="">
  <div>

    <div>
      <label for="sidebartoggler">MENU</label>
      <p>Lorizzle ipsizzle dolor i'm in the shizzle amizzle,away adipiscing elit. Owned sapizzle velizzle,hizzle volutpat,suscipit quizzle,gravida vel,go to hizzle. We gonna chung check it out tortor. Sed bow wow wow. Dang sure dolizzle dapibizzle turpizzle
        tempizzle fo shizzle. pellentesque break yo neck,yall et turpizzle. Fizzle izzle tortor. Pellentesque nizzle rhoncizzle crazy. In yippiyo crackalackin bling bling dictumst. Bizzle dapibizzle. Curabitur da bomb urna,pretizzle shizzlin dizzle,gangsta ac,eleifend vitae,nunc. Funky fresh suscipizzle. Integer semper fo shizzle uhuh ... yih! get down get down. Etizzle get down get down get down get down fo shizzle nisl. Own yo' quizzle dope. Shiz check out this,ipsizzle i'm in the shizzle
        malesuada scelerisque,nulla shiznit euismod felis,izzle break yo neck,yall metizzle nulla izzle mah nizzle. Vivamus ullamcorper,tortor et rizzle tellivizzle,nibh ass ultricizzle dawg,izzle luctus check it out elit izzle pimpin'. Maurizzle
        bow wow wow,orci mammasay mammasa mamma oo sa volutpizzle ass,gizzle shit we gonna chung fizzle,at bibendizzle enizzle that's the shizzle funky fresh nisl. Nullizzle fizzle velizzle pizzle orci uhuh ... yih!</p>
      <footer>Yeah,footer!</footer>
    </div>
    <div>
      <ul>
        <li>home</li>
        <li>projects</li>
        <li>cool</li>
      </ul>
    </div>
  </div>

</body>

</html>

解决方法

您可以从页脚中删除宽度并向右添加：0. 
footer {
    bottom: 0;
    margin-left: inherit;
    height: 100px;
    left: 0;
    position: absolute;
    background-color: lightgrey;
    right: 0;
}

forloop内部的内部html无法正常工作

forloop内部的内部html无法正常工作

您需要从rcnounk获取DIV-elem。

rcnounk=document.getElementById('rcnounk');

似乎可以正常工作。

var draftloc = { ans: ["a","b","c"] };
for (var i = 0; i < draftloc.ans["length"]; i++) {
  //draftloc.length === draftloc["length"]

  console.log("draftloc for loop works");

rcnounk=document.getElementById('rcnounk');
  //rcnounk is a element(div)
  rcnounk.innerHTML += `<div>
                        <div>
                            <input type="checkbox" name="example">
                            <label>${draftloc.ans[i]}</label>
                        </div>
                    </div>`;
}
<div id='rcnounk'>RC</div>

html – CSS Gradient动画无法正常工作

html – CSS Gradient动画无法正常工作

我正在尝试制作动画CSS渐变背景,我在此页面上为渐变生成CSS： http://www.gradient-animator.com/
这是css： 
body {
background: linear-gradient(270deg,#18f0b8,#18a2f0,#db5640);
background-size: 600% 600%;
-webkit-animation: Gradient 60s ease infinite;
-moz-animation: Gradient 60s ease infinite;
animation: Gradient 60s ease infinite;
@-webkit-keyframes Gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes Gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes Gradient { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
}

它输出的梯度很好,但它不会生成动画.我错过了什么吗？
这是小提琴：http://jsfiddle.net/9s9g6ktu/

解决方法

是的….你必须关闭你的身体css,并自己拥有你的关键帧动画.喜欢这个 http://jsfiddle.net/9s9g6ktu/1/

html – CSS white-space nowrap无法正常工作

html – CSS white-space nowrap无法正常工作

我有一个div,有几个子div,左边是浮动的.我不希望它们中断,所以我将它们设置为显示：inline-block和white-space：Nowrap.遗憾的是一切都没有发生.他们只是一直在打破.

最后我想在x方向滚动,但是当我添加overflow-x：scroll; overflow-y：可见它在y方向滚动.

.a {
    width: 400px;
    height: 300px;
    white-space: Nowrap;
    display: inline-block;
}
.b {
    float: left;
    width: 50px;
    height: 200px;
    display: inline-block;
}

<div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

你可以看到my complete implementation on JSFiddle

解决方法

我可能不完全理解你的问题,但如果你删除它似乎divs / scroll表现：float：left;来自.b并添加：overflow：auto;到.a

html – CSS3 ::选择选择器在锚标签上无法正常工作

html – CSS3 ::选择选择器在锚标签上无法正常工作

我正在使用这样的 CSS3 :: section Selector 
::selection{
    color:red;
    background-color:pink;

}
::-moz-selection {
    color:red;
    background-color:pink;

}

因此,当选择某个元素时,它应将其颜色更改为红色,将背景更改为粉红色.

除了Anchor标签< a>之外,它可以按预期工作.

选择锚文本时,它会将样式应用于链接文本,但不会应用于锚文本下方的行.

JSfiddle：http://jsfiddle.net/GcBT2/1/

那么我们怎样才能将样式应用到下划线呢？

PS：浏览器测试：chrome 31和firefox 25.0.1

解决方法

注意 per MDN

Only a small subset of CSS properties can be used in a rule using
::selection in its selector: color,background,background-color and
text-shadow. Note that,in particular,background-image is ignored,
like any other property.

链接上的行是文本修饰的一部分,伪选择器不会考虑这一行.你最好的选择可能是使用它删除它

a{
 text-decoration:none;
}

您可能还想注意：

Though this pseudo-element was in drafts of CSS Selectors Level 3,it
was removed during the Candidate Recommendation phase (07001)

The ::selection pseudo-element currently isn’t in any CSS module on
the standard track. It should not be used in production environments.

Further information

今天的关于HTML – 粘滞页脚与侧边栏无法正常工作和html页脚固定到底部的分享已经结束，谢谢您的关注，如果想了解更多关于forloop内部的内部html无法正常工作、html – CSS Gradient动画无法正常工作、html – CSS white-space nowrap无法正常工作、html – CSS3 ::选择选择器在锚标签上无法正常工作的相关知识，请在本站进行查询。

本文标签：

上一篇html – bootstrap轮播滑块自定义箭头（滑动轮播图js代码）

下一篇硒xpath刮混合内容html跨度

相关文章