CSS HTML 隐藏屏幕右侧的字段答案

【问题标题】：CSS HTML hiding a field from screen's rightCSS HTML 隐藏屏幕右侧的字段
【发布时间】：2012-08-15 11:51:01
【问题描述】：

我将一个表单放置在一个文档的右侧，只显示了它的一部分

<form class="right-form">
   <textarea></textarea>
   <input type="submit" value="submit"></div>
</form>

我的样式是这样的（简化示例）

 body{
   height: 100%;
   width: 100%;
 }

.right-form{
   position:absolute;
   rigth: -220px;
   width: 250px
   transition: width 0.5s ease 0s, right 0.5s ease 0s;
}
.right-form:hover{
   right: 0px;
}

一切正常，除了底部的滚动条在隐藏表单时从左到右滚动，我不希望它出现。有人知道如何处理这个css问题吗？希望问题是可以理解的...

非常感谢

编辑：使用 matthias.p 提出的溢出规则，用户仍然可以按箭头键向右滚动

【问题讨论】：

标签： html css forms styles

【解决方案1】：

添加

overflow: hidden;

到正文规则。

编辑： 你可以这样做：

body {
height: 100%;
width: 100%;
}
.right-form {
position:absolute;  
right: 0;
width: 30px;
overflow: hidden;
transition: width 0.5s ease;
}
.right-form:hover {
width: 250px;
}

我没有更改right 的值，而是更改了表单的宽度，并在表单上而不是在正文上执行了overflow。现在您不能再使用箭头键在不悬停时显示表单。

【讨论】：

非常感谢，但使用箭头按钮，您仍然可以向右或向左移动并查看混乱情况..您有这方面的东西吗？
非常感谢...我发现您也可以使用 javascipt 取消箭头键的使用。这是一种不同的方式，即使你看到合同的形式......无论如何你都赢得了额外的积分

【解决方案2】：

使用溢出仍然允许使用箭头键.. 您可以像这样取消箭头键的使用：

$(document).keydown(function(event) {
     switch(event.keyCode){
        case 37:
        case 39:
            return false;
            break;
     }
 });

【讨论】：

【解决方案3】：

使用下面的代码，100% + 默认边距导致问题

body{
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
}

.right-form{
     position:absolute;
     rigth: -220px;
     width: 250px
     transition: width 0.5s ease 0s, right 0.5s ease 0s;
}
.right-form:hover{
     right: 0px;
}

【讨论】：

好吧，我实际上在我的真实网页中使用了 margin:0px 和 padding:0px，但无论如何谢谢。