个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我是 CSS 的新手，我一直在四处寻找并研究代码，但我正处于不知道该做什么的阶段。
我在页面顶部有一个简单的框。这个想法是，这个盒子在任何时候都将穿过屏幕的顶部，并且总是与边缘(左侧和右侧)相交。到目前为止，这是我所拥有的；
body
{
background-color:#E8E8E8;
margin:0;
padding:0;
}
#topbar
{
width:100%;
height:50px;
background-color:#fff;
-webkit-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.10);
-moz-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.10);
box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.10);
}
#mainbodybox
{
margin:auto;
margin-top:150px;
width:1500px;
height:500px;
background-color:#fff;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<link rel="stylesheet" type="text/css" href="fc_style.css">
<body>
<div id="topbar"></div>
<div id="mainbodybox"></div>
</body>
</html>
现在这工作正常，除了，当浏览器窗口的大小调整到小于 mainbodybox 的宽度时，它会导致水平滚动变得可用，我想这也很好但是当你滚动时它会破坏顶部栏并且不再适合屏幕边缘，如何解决？
另外，作为一个额外的问题，对于mainbodybox，它应该与窗口/屏幕尺寸的宽度相关联地显示，但只是在一定程度上。例如，我希望它只有一个最小尺寸以正确适合 1024x768 尺寸，然后最大尺寸为 1280x1024。如果小于 1024x768 则滚动会出现，如果大于 1280x1024 则简单的空间将继续扩展框。
我很抱歉所有的文字，但我现在不适合做这些事情
在此先感谢您的帮助，非常感谢
最佳答案
如果你想移除滚动条，你可以使用min-width 和max-width 规则来做到这一点 max-width: 100% ; 将意味着 #mainbodybox 在浏览器窗口重新调整大小时适应视口(viewport)的宽度。使用带有百分比的宽度规则通常意味着元素被绑定(bind)到父容器的最大宽度，在您的情况下，父容器是 body 标签，但由于它没有指定宽度，它将默认为视口(viewport)的宽度(可视区域浏览器窗口)。
关于你的第二个问题，这两个规则都可以用于各种单位，例如像素、百分比、em 等。因此您可以分别将 min-width 设置为 1024px 和 max-width 为 1280px。
这是一个带有最小和最大规则设置的代码笔:codepen example
关于css - 使框不断适应屏幕和页面内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22943953/
24
4
0
如果这不是一个错误，那就是另一个错误。如果不是那样的话，那就是别的东西了。我觉得我的项目已经改变了很多，现在只是试图解决代码签名问题，结果一切都搞砸了。我严格按照说明进行操作，但出现错误，例如当前的“
我不确定是否有一些我不知道的内置变量或规则，或者 make 是否有问题，或者我只是疯了。 对于我的一个项目，我有一个如下的 makefile: CC=g++ CFLAGS=-O3 `libpng-co
我有大约 10 个 div，它们必须不断翻转，每个 div 延迟 3 秒 这个 codrops 链接的最后一个效果是我正在寻找的，但无需单击 div http://tympanus.net/Devel
我如何使用 jQuery 持续运行 PHP 脚本并每秒获取响应，以及将鼠标上的少量数据发送到同一脚本？ 我真的必须添加一些随机扩展才能让这么简单的计时器工作吗？ 最佳答案 To iterate is
JBoss 4.x EJB 3.0 我见过如下代码(大大简化): @Stateless @TransactionAttribute(TransactionAttributeType.NOT_SUPPO
使用 PHPStorm，我试图忽略每次尝试进行 git 提交时 pop 的 workspace.xml。 我的 .gitignore 看起来像: /.idea/ .idea/workspace.xml
我是一名优秀的程序员,十分优秀！