html+css高度100%的时候边框超出，出现滚动条的解决办法，带边框的100%高度

最新推荐文章于 2024-06-12 07:30:00 发布
最新推荐文章于 2024-06-12 07:30:00 发布
阅读量1.1k 收藏
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/ahjesus/archive/2012/11/29/2794843.html
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        html,body{ margin:0; padding:0; height:100%;}
        .content{ margin:0 auto; width:958px; height:100%; border-left:solid 1px #ccc;border-right:solid 1px #ccc;}
        .block{width:100%;height:100%;}
        .top_line{ position:absolute; top:0; width:958px; height:1px;border-top:solid 1px #ccc;}
        .bottom_line{ position:absolute; bottom:0; width:958px; height:1px;border-bottom:solid 1px #ccc;}
    </style>
</head>
<body>
<div class="content">
    <div class="top_line"></div>
    <div class="block">
//出自http://www.cnblogs.com/ahjesus 
尊重作者辛苦劳动成果,转载请注明出处,谢谢! 
</div>
    <div class="bottom_line"></div>
</div>
</body>
</html>

谁有更好的解决方案请留言，会在第一时间署名更新，（不用js）

转载于:https://www.cnblogs.com/ahjesus/archive/2012/11/29/2794843.html

weixin_34077371
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html+css技能测试带答案).doc
11-23
8. CSS 属性 overflow 用于设置元素超过宽度时是否隐藏或显示滚动条。 知识点：CSS 溢出处理，overflow 属性的使用场景和作用。 9. CSS 属性 font-style 用于设置字体的粗细。 知识点：CSS 字体样式，font-style ...
HTML+CSS技能测试(带答案).doc
11-15
`overflow` 属性用于处理内容超出元素边界时的行为，可以设置为 `hidden` 隐藏超出部分，或者显示滚动条。 `font-style` 属性用于改变字体的样式，例如设置斜体。HTML 锚点是通过 `name` 属性来定义目标位置，与...
子元素高度占据父元素100%，为什么会出现滚动条？
weixin_60974764的博客
07-09 657
纵向滚动条出现？不，你不该出现！
原生html table固定高度并显示滚动条
liyaodong1234的博客
01-31 862
【代码】原生html table固定高度并显示滚动条。
CSS--超出就显示滚动条并设置滚动条的样式
最新发布
IT利刃出鞘的博客
06-12 1556
本文介绍HTML如何超出就显示滚动条并设置滚动条的样式。
html页面刷新滚动条高度为0,为什么css设置页面高度100vh会出现滚动条
weixin_34759094的博客
06-03 2397
如下，预期效果满屏都是红色，没有滚动条。.div{height:100vh;backgroud:red;}实际效果是会有滚动条，因为body 有默认的 8px 的margin，清掉就好了body{margin:0;}.div{height:100vh;backgroud:red;}这也只是在部分情况下奏效，在有些设备上还是有问题的。比如移动端 ios的safari浏览器或者android端手机...
CSS - PC / 移动端左右满屏高度布局（100% 高度 + 溢出滚动条）
王佳斌
08-25 2767
CSS - PC / 移动端左右满屏高度布局（100% 高度 + 溢出滚动条），Vue.js css左右布局，全屏幕并且内容超出时会出现滚动条，CSS 多种方法实现100%高度的容器，CSS子元素撑满父元素（height: 100%无效），css设置高度height: 100%滚动条无法显示的解决办法，html盒子模型子元素怎么水平占满父元素_CSS 盒模型，子元素高度撑满父级（父级未设置高度），css 移动端左右100%高度布局，css 高度100%并设置滚动条。
html修改div的overflow宽度,css overflow:auto超出高度或宽度出现滚动条
weixin_27956639的博客
06-04 4634
css设置overflow:auto后超出高度或宽度出现滚动条当对象元素设置overflow:auto后，如果对象内的内容(图片或文字或其它元素内容)超出限制高度或宽度后将会出现滚动条。如果超过宽度那么对象底部X横向出现滚动条，如果超过高度那么对象盒子左侧出现下拉滚动条。overflow设置当对象的内容超过其指定高度及宽度时如何管理内容的属性,是添加滚动条、还是隐藏剪切超出内容。overflow:...
使用html+css+javascript实现聊天室的展示界面，并给出源码
06-03
我们还设置了聊天记录的滚动条，自动滚动到底部。 小结 使用 HTML、CSS 和 JavaScript，我们可以轻松地实现一个聊天室的展示界面。本文提供了一个简单的聊天室展示界面的示例代码，包括 HTML、CSS 和 JavaScript ...
CSS设置元素width=100%失效的一种解决方式(该元素的父元素为body).pdf
12-16
这是因为`body`元素的宽度可能受到浏览器滚动条、页面边距等因素的影响，导致子元素无法正确地占据100%的宽度。为了解决这个问题，我们可以采取一些策略来确保元素宽度与窗口宽度保持一致。 首先，理解`width: 100%...
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
11-21
下面我们将详细探讨如何通过CSS和JavaScript来解决这些问题，让这些元素既能自动换行，又能自适应文本内容的高度。 对于`<pre>` 元素，它的默认行为是不进行单词换行，导致当文本过长时，内容会超出容器边界而不是...
内容超出div,设置滚动条
热门推荐
qq_46239275的博客
12-11 1万+
当内容超出div时,自动出现滚动条的条件: 1、内容必须在div中； 2、div要设置宽高； 3、overflow 设置 auto； 备注： 1、overflow:auto; 当内容宽度超出div宽度，或者内容高度超出div宽度，或者同时超出，会自动出现水平、或者垂直、或者水平和垂直滚动条； 2、overflow-x:auto; 当内容宽度超出div宽度，自动出现水平滚动条； 3、overflow-y:auto; 当内容宽度超出div高度，自动出现垂直滚动条； 注意： 设置好后会自动换行；
html页面未超出范围却出现滚动条，解决方法
努力、拼搏、奋进
09-28 3490
html页面未超出范围却出现滚动条，解决方法
为html设置100%，body 设置100% 出现滚动条的问题
weixin_34408624的博客
08-04 1871
是以为body 默认的margin造成，与padding没关系，因为body的默认padding为0 转载于:https://www.cnblogs.com/FineDay/articles/5736236.html
html表格滚动字幕的宽度,HTML表格的宽度为100％，在tbody中具有垂直滚动
weixin_35895485的博客
06-03 259
小编典典为了使元素可滚动，我们需要更改其在页面上的显示方式，即用于display: block;将其显示为块级元素。由于我们更改了的display属性tbody，因此我们也应该更改thead element的属性，以防止破坏表布局。因此，我们有：thead, tbody { display: block; }tbody {height: 100px; /* Just for the d...
解决100%全屏出现滚动条 页面有白边问题
m0_63327154的博客
05-21 1447
在app.vue设置 <style lang="scss" > html, body, #app { height: 100%; margin: 0; padding: 0; } </style>
css 100vw、100vh出现滚动条怎么解决
m0_52726759的博客
02-13 1万+
css，100vw、100vh滚动条问题
body{width:100%}但窗口出现滚动条&body的子元素height：100%实际高度未填满整个页面
lamanchas的博客
11-02 1万+
width/height百分比设置参考链接1：width=100%时会出现滚动条的情况 参考链接2：html,body设置高度100%和默认的滚动条问题一：body{width:100%}但窗口出现滚动条代码:<!doctype html> <html> <head> <meta charset="utf-8"/> <title>body{width":100%;}窗口有滚动条</title> <
CSS 实现内容区域高度自适应，超出有滚动条
hongtoushan的博客
05-25 3631
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body, html { box-sizing: border-box; margin: 0; padding: 0; height:
页面高度100% 为什么还会有滚动条
05-30
但是，如果页面中包含内容超过浏览器窗口高度的元素，那么这些元素的高度将会撑起整个页面，导致页面高度大于浏览器窗口高度，从而出现滚动条。 另外，滚动条也会占用浏览器窗口的一定宽度或高度，这可能会导致...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值