Question

顶部的黄色框应该像它一样工作。底部的那个没有。滚动应该停在页脚的末尾，这里是黑线（也不是向右延伸）。

当然，可以通过图形来实现这一目标有CSS的解决方案吗？

＆＃13;

list1=[]
list2=[]
i = 0
while not(False):
    plain_text = input ("Enter any string ")
    if (plain_text !='q'):
        list1.append(plain_text)
        i=i+1
    else:
        break



encrypted_text = ""
for c in list1: #Changed Code
  for c1 in c:
    x = ord(c1)
    x = x + 1
    c2 = chr(x)
    encrypted_text = encrypted_text + c2
print(encrypted_text)

#Decryption
encrypted_text = "Uijt!jt!b!uftu/!BCD!bcd"

plain_text = ""
for c in encrypted_text:
    x = ord(c)
    x = x - 1
    c2 = chr(x)
    plain_text = plain_text + c2
print(plain_text)
list2=[encrypted_text]
print(plain_text)
print("the original msgs are :" , list1)
print("the encrypted msgs are :" ,list2)

＆＃13;

#mainwrapper {
  max-width: 1000px;
  margin: auto;
  padding-top: 100px;
  position: relative;
}

.top-ci-colorbox {
  position: absolute;
  top: -135px;
  right: 0;
  height: 200px;
  width: 2000px;
  background-color: yellow;
  transform: rotate(-3.5deg);
}

.bottom-ci-colorbox {
  position: absolute;
  bottom: -135px;
  left: 0;
  height: 200px;
  width: 2000px;
  background-color: yellow;
  transform: rotate(-3.5deg);
}

header {
  position: fixed;
  max-width: 1000px;
  top: 0;
}

footer {
  position: relative;
  z-index: 10;
  border-bottom: 1px solid black;
}

＆＃13;

View on JSFiddle

Answer 1

请检查此代码。希望它会帮助你

prctl()

#mainwrapper {
   max-width: 100%;
   margin: auto;
   padding-top: 100px;
   position: relative;
   overflow-y: hidden;
}
#mainwrapper:before,
#mainwrapper:after{
  content : "";
  transform: rotate(-3.5deg);
  position: absolute;
  top: -60px;
  left: 0;
  height: 100px;
  right: 0;
  width: 100%;
  background-color: yellow;
  transform: rotate(-3.5deg);
  
}
#mainwrapper:after{
  top: auto;
  bottom: -60px;
}
   
   header {
     position: fixed;
     max-width: 1000px;
     top: 0;
   }
   
   footer {
     position: relative;
     z-index: 10;
     border-bottom: 1px solid black;
   }

Answer 2

html,body,#mainwrapper{
  height:100%;
}
body{
  margin-bottom:0;
}
#mainwrapper {
   max-width: 1000px;
   margin: auto;
   padding-top: 100px;
   position: relative;
   overflow:hidden;
   box-sizing:border-box;
}
main{
      height: calc( 100% - 19px );
}
   .top-ci-colorbox {
      position: absolute;
      top: -135px;
      right: 0;
      height: 200px;
      width: 2000px;
      background-color: yellow;
      transform: rotate(-3.5deg);
   }

   .bottom-ci-colorbox {
      position: absolute;
      bottom: -135px;
      left: 0;
      height: 200px;
      width: 2000px;
      background-color: yellow;
      transform: rotate(-3.5deg);
   }
   
   header {
     position: fixed;
     max-width: 1000px;
     top: 0;
   }
   
   footer {
     position: relative;
     z-index: 10;
     
     border-bottom: 1px solid black;
   }

<!DOCTYPE html>
  <html>
    <head>

    </head>
    <body>
         <div id="mainwrapper">
            <div class="top-ci-colorbox"></div>
            <header>Navigation Here</header>
            <main>
               Is it possible to let the bottom box behave like the top one, so that the scrolling ends after reaching the footer and most part of the box is not beeing displayed. The same with the right scrolling, which is extended by the bottom box (and left scrolling not by the top one).
               <br><br><br><br><br><br><br><br><br><br>
               <br><br><br><br><br><br><br><br><br><br>

            </main>
            <footer>Footer Here. Scrolling should stop at black line</footer>
            <div class="bottom-ci-colorbox"></div>
         </div>

    </body>
  </html>

签入小提琴https://jsfiddle.net/h25d5b8z/28/

首先你需要将高度100％设置为html，body和main元素。如果我们绝对任何项目，我们必须添加属性overflow：hidden到它的父元素。在这种情况下我们需要添加overflow：隐藏到＃main-wrapper.We还需要将高度设置为主标记元素

Answer 3

在stackoverflow上阅读了几个关于css溢出问题的主题之后，我自己找到了解决方案。由于意外行为，很难仅在一个轴上使用溢出。

insted #mainwrapper div需要包装在另一个div中。这个div带有溢出：隐藏。

<div style="overflow:hidden;">
     <div id="mainwrapper">
     ...
     </div>
</div>

Div与位置绝对延伸底部滚动

3 个答案: