在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
如何让modal()根据返回的内容自动调整宽度？
#bootstrap request
&script type="text/javascript"&
$.get('index.php',function(html){
$('body').append(html);
$('#ajaxHtml').modal('show'); #如果让这个ajaxHtml div自动调整宽度？
//index.php
&div id="ajaxHtml"&
&table border="1" width=100%&
&td&ID&/td&
&td&Name&/td&
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
$('#ajaxHtml').on('show', function() {//捕获show事件
//获取html宽度
//调整modal宽度
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
首先声明，如果真的这么做了也就失去了 bootstrap 多分辨率适配的好处。bootstrap 的 modal 窗口能够自动在不同分辨率下用不同的宽度，这就是它的特色呢。
以默认大小的 modal 为例，要做改变宽度其实只需要在 .modal-dialog 样式上做文章就行了。为了简单，我现在直接写在元素标签上了。
关键三点：
用 display: inline-block；
父节点用 text-center 样式居中；
重置宽度 width: auto
HTML 代码：
&div id="dialog" class="modal fade text-center"&
&div class="modal-dialog" style="display: inline- width:"&
&div class="modal-content"&
&div class="modal-header"&
&button type="button" class="close" data-dismiss="modal" aria-hidden="true"&&&/button&
&h4 class="modal-title"&Modal title&/h4&
&div class="modal-body"&
&p&One fine body&&/p&
&div class="modal-footer"&
&button type="button" class="btn btn-default" data-dismiss="modal"&Close&/button&
&button type="button" class="btn btn-primary"&Save changes&/button&
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。一种table超出高度进出滚动条的解决方案
时间： 16:16:09
&&&& 阅读：9610
&&&& 评论：
&&&& 收藏：0
标签：在日常的开发过程中，我们可能会遇到这样一种需求，在指定高度内显示table,超过高度时表格出滚动条。
让我们带着这个问题，一起来探讨吧！
1 &!DOCTYPE html&
2 &html xmlns="http://www.w3.org/1999/xhtml" ng-app="app"&
&title&&/title&
&link href="../css/bootstrap.css" rel="stylesheet" /&
&link href="../css/index.css" rel="stylesheet" /&
8 &body ng-controller="tableCtrl"&
&table class="table table-striped table-bordered table-hover table-condensed"&
&th&Id&/th&
&th&Name&/th&
&th&Email&/th&
&th&操作&/th&
&tr ng-repeat="person in persons"&
&td ng-bind="person.id"&&/td&
&td ng-bind="person.name"&&/td&
&td ng-bind="person.email"&&/td&
&td ng-click="persons.remove(person)" class="del-person"&删除&/td&
31 &script src="../js/angular.js"&&/script&
32 &script src="../js/index.js"&&/script&
33 &/body&
34 &/html&
1 var app = angular.module("app", []);
3 app.controller("tableCtrl", [
‘$scope‘, function($scope) {
$scope.persons = [];
for (var i = 0; i & 15; i++) {
var index = i + 1;
var person = {
id: index,
name: ‘person‘ + index,
email: ‘person‘ + index + ‘@qq.com‘
$scope.persons.push(person);
//删除person
$scope.deletePerson= function(person) {
$scope.persons.remove(person);
*删除数组指定下标或指定对象
26 Array.prototype.remove = function (obj) {
for (var i = 0; i & this. i++) {
var temp = this[i];
if (!isNaN(obj)) {
if (temp == obj) {
for (var j = j & this. j++) {
this[j] = this[j + 1];
this.length = this.length - 1;
先看下效果，怎样
貌似没什么问题，如果我给table外面的div,设置一个小点的高度呢？
那么问题又来了，红线是div的区域，很明显看到，table的调试超出了div的高度。
我想实现当table的高度超出div时，出现滚动条，而不是直接超出，这样太暴力了。
那把设置div的overflow:看看效果怎样。
貌似可以了，睁大你的24k钛金眼看看，会发现滚动条下拉框时，thead不见了，列少还可以知道哪个列是什么，列多的话就，不看列头，就不知道列名是什么。
那我就将tbody固定高度，overflow:看看效果怎样。
thead是固定不动了，tbody也出现了滚动条，但是thead与tbody的列宽度没对齐，这也太丑了吧。
唉！白忙了这么长时间了...
看成来只有请教大牛了。。。
大牛曰："不会做，还不会模仿吗？"。
于是打开了KendoUi官网，找到了这个
这不就是我要的效果吗，早说嘛。
看了下生成的代码结构
它用的是两个div内套了两个table，一个放thead,一个放thead,看起来像是一个table。
于是，我按这种结构修改代码。看看效果。
thead与tbody的列宽没对齐，这不是我想要的结果。
设置下宽度
有滚动条时，还是有点没对齐，很明显，删除几条数据试试。
没滚动条时是对齐的。滚动条占用了dvTbody的宽度，这里上面table比下面的table宽出一个滚动条的宽度17px。我们可以用脚本控制，来解决这个问题。
当taTbody的高度超过其父元素时，设置dvThead的padding-right:17px.
差不多了吧，有那么回事了。
大功告成，可随意删除、增加来看效果。
先写到这。
如果觉得对你有帮助，请点个赞，谢谢！
不足与错误之处，敬请批评指正！标签：原文地址：http://www.cnblogs.com/xiaoafei1991/p/4781592.html
&&国之画&&&& &&&&chrome插件
版权所有 京ICP备号-2
迷上了代码！谁知道用bootstrap 怎么将在高度不够的时候 footer一栏仍会在最底部_百度知道
谁知道用bootstrap 怎么将在高度不够的时候 footer一栏仍会在最底部
class=&navbar-fixed-bottom& 记得给你的body设置padding-bottom:70
你把 container 设置一个最小高度就ok了 min-height
为您推荐：
其他类似问题
bootstrap的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。CSS中如何设拉伸背景图片铺满屏幕_百度知道
CSS中如何设拉伸背景图片铺满屏幕
我写的CSS代码是#bg{
width: 100%; height: 100%; background:url(images/beijing.png);}这样子他会重复图片铺满屏幕，我想要让他拉伸图片铺满屏幕，应该怎么写呢？
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
给body标签指定背景图，这样背景图就可以填充整个浏览器viewport了。其实，该方案对所有的块级容器都可以生效。块级容器的宽高是动态的，那么背景图将自动伸缩，充满整个容器。CSS body标签的样式如下：body {/* 加载背景图 */background-image: url(images/background-photo.jpg);/* 背景图垂直、水平均居中 */background-position:/* 背景图不平铺 */background-repeat: no-/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */background-attachment:/* 让背景图基于容器大小伸缩 */background-size:/* 设置背景颜色，背景图加载过程中会显示背景色 */background-color: #464646;}其实当时在互联网界已经有过一些统一样式表语言的建议了，但CSS是第一个含有“层叠”丰意的样式表语言。在CSS中，一个文件的样式可以从其他的样式表中继承。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合每个人的爱好。哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议，1995年的www网络会议上CSS又一次被提出，博斯演示了Argo浏览器支持CSS的例子，哈肯也展示了支持CSS的Arena浏览器。同年，W3C组织（World WideWeb Consortium）成立，CSS的创作成员全部成为了W3C的工作小组并且全力以赴负责研发CSS标准，层叠样式表的开发终于走上正轨。有越来越多的成员参与其中，例如微软公司的托马斯·莱尔顿(Thomas Reaxdon)，他的努力最终令Internet Explorer浏览器支持CSS标准。哈坤、波斯和其他一些人是这个项目的主要技术负责人。1996年底，CSS初稿已经完成，同年12月，层叠样式表的第一份正式标准（Cascading style Sheets Level 1）完成，成为w3c的推荐标准。1997年初，W3C组织负责CSS的工作组开始讨论第一版中没有涉及到的问题。其讨论结果组成了1998年5月出版的CSS规范第二版。
采纳率：56%
background:url(images/beijing.png)加个属background-size:100%;background:url(images/beijing.png) no-
本回答被网友采纳
background:url(images/beijing.png)
还是不行啊。。依然是重复这个图片铺满屏幕QAQ
。。。你是要拉伸啊，看错了。加个属background-size:100%;background:url(images/beijing.png) no- 图片会失真哦！
我试了一下。。这样子他右边就空出一块了。。什么情况= =
要么是外框限制了，都设成100%，我这里试验了下是铺满的，你再看看有没有别的属性影响了的。
本回答被提问者采纳
#bg{ width: 100%;height: 100%;background:url(images/beijing.png)}
为什么还是不行QAQ
明白你的意思了，图品智能被重复延伸，不会放大，你的意思应该是把图片放大，你可以把图片用ps工具放大，然后在加进去，你也可以把图片弄得很小，比如说只有几个像素那样拉伸起来就不会不好看了，具体得看看你的图片是什么样子的！
那如果不同的电脑分辨率不一样的话，到别的电脑上又会重复延伸了吧？
margin:0&background:&url(bg.jpg)&no-&background-size:100%&100%;&background-attachment:CSS拉伸背景图片铺满屏幕
其实这里的答案都很好，但是有点本来是正确的，但是代码顺序写反了就会出错例如：background:url(images/beijing.png)加个属background-size:100%;background:url(images/beijing.png) no-这个答案，要将background-size:100%;这个代码写在background:url(images/beijing.png)&no-的后面才会覆盖整个bodybackground-size:100%; 也可以写成 background-size: cover,同理要写在background:url(images/beijing.png) no-的后面
2条折叠回答
其他3条回答
为您推荐：
其他类似问题
背景图片的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。Bootstrap 教程
Bootstrap 折叠（Collapse）插件
折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。
如果您想要单独引用该插件的功能，那么您需要引用 collapse.js。同时，也需要在您的 Bootstrap 版本中引用 。或者，正如
一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。
您可以使用折叠（Collapse）插件：
创建可折叠的分组或折叠面板（accordion），如下所示：
&div class=&panel-group& id=&accordion&&
&div class=&panel panel-default&&
&div class=&panel-heading&&
&h4 class=&panel-title&&
&a data-toggle=&collapse& data-parent=&#accordion&
href=&#collapseOne&&
点击我进行展开，再次点击我进行折叠。第 1 部分
&div id=&collapseOne& class=&panel-collapse collapse in&&
&div class=&panel-body&&
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo.
&div class=&panel panel-default&&
&div class=&panel-heading&&
&h4 class=&panel-title&&
&a data-toggle=&collapse& data-parent=&#accordion&
href=&#collapseTwo&&
点击我进行展开，再次点击我进行折叠。第 2 部分
&div id=&collapseTwo& class=&panel-collapse collapse&&
&div class=&panel-body&&
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo.
&div class=&panel panel-default&&
&div class=&panel-heading&&
&h4 class=&panel-title&&
&a data-toggle=&collapse& data-parent=&#accordion&
href=&#collapseThree&&
点击我进行展开，再次点击我进行折叠。第 3 部分
&div id=&collapseThree& class=&panel-collapse collapse&&
&div class=&panel-body&&
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo.
结果如下所示：
data-toggle="collapse" 添加到您想要展开或折叠的组件的链接上。
href 或 data-target 属性添加到父组件，它的值是子组件的 id。
data-parent 属性把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接上。
创建不带 accordion 标记的简单的可折叠组件（collapsible），如下所示：
&button type=&button& class=&btn btn-primary& data-toggle=&collapse&
data-target=&#demo&&
简单的可折叠组件
&div id=&demo& class=&collapse in&&
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo.
结果如下所示：
正如您在实例中看到的，我们创建了一个可折叠的组件，与折叠面板（accordion）不同，我们没有添加属性 data-parent。
下表列出了折叠（Collapse）插件用于处理繁重的伸缩的 class：
Class描述实例
.collapse隐藏内容。
.collapse.in显示内容。
.collapsing当过渡效果开始时被添加，当过渡效果完成时被移除。&
您可以通过以下两种方式使用折叠（Collapse）插件：
通过 data 属性：向元素添加 data-toggle="collapse" 和 data-target，自动分配可折叠元素的控制。data-target 属性接受一个 CSS 选择器，并会对其应用折叠效果。请确保向可折叠元素添加 class .collapse。如果您希望它默认情况下是打开的，请添加额外的 class .in。
为了向可折叠控件添加类似折叠面板的分组管理，请添加 data 属性 data-parent="#selector"。
通过 JavaScript：可通过 JavaScript 激活 collapse 方法，如下所示：
$('.collapse').collapse()
有一些选项是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项：
选项名称类型/默认值Data 属性名称描述
parentselector 默认值：falsedata-parent如果提供了一个选择器，当可折叠项目显示时，指定父元素下的所有可折叠的元素将被关闭。这与传统的折叠面板（accordion）的行为类似 - 这依赖于 accordion-group 类。
toggleboolean 默认值：truedata-toggle切换调用可折叠元素。
下面是一些折叠（Collapse）插件中有用的方法：
方法描述实例
Options: .collapse(options)激活内容为可折叠元素。接受一个可选的 options 对象。
$('#identifier').collapse({
&&&&toggle: false
Toggle: .collapse('toggle')切换显示/隐藏可折叠元素。
$('#identifier').collapse('toggle')
Show: .collapse('show')显示可折叠元素。
$('#identifier').collapse('show')
Hide: .collapse('hide')隐藏可折叠元素。
$('#identifier').collapse('hide')
下面的实例演示了方法的用法：
&div class=&panel-group& id=&accordion&&
&div class=&panel panel-default&&
&div class=&panel-heading&&
&h4 class=&panel-title&&
&a data-toggle=&collapse& data-parent=&#accordion&
href=&#collapseOne&&
点击我进行展开，再次点击我进行折叠。第 1 部分--hide 方法
&div id=&collapseOne& class=&panel-collapse collapse in&&
&div class=&panel-body&&
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
&div class=&panel panel-success&&
&div class=&panel-heading&&
&h4 class=&panel-title&&
&a data-toggle=&collapse& data-parent=&#accordion&
href=&#collapseTwo&&
点击我进行展开，再次点击我进行折叠。第 2 部分--show 方法
&div id=&collapseTwo& class=&panel-collapse collapse&&
&div class=&panel-body&&
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
&div class=&panel panel-info&&
&div class=&panel-heading&&
&h4 class=&panel-title&&
&a data-toggle=&collapse& data-parent=&#accordion&
href=&#collapseThree&&
点击我进行展开，再次点击我进行折叠。第 3 部分--toggle 方法
&div id=&collapseThree& class=&panel-collapse collapse&&
&div class=&panel-body&&
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
&div class=&panel panel-warning&&
&div class=&panel-heading&&
&h4 class=&panel-title&&
&a data-toggle=&collapse& data-parent=&#accordion&
href=&#collapseFour&&
点击我进行展开，再次点击我进行折叠。第 4 部分--options 方法
&div id=&collapseFour& class=&panel-collapse collapse&&
&div class=&panel-body&&
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
$(function () { $('#collapseFour').collapse({
toggle: false
$(function () { $('#collapseTwo').collapse('show')});
$(function () { $('#collapseThree').collapse('toggle')});
$(function () { $('#collapseOne').collapse('hide')});
结果如下所示：
下表列出了折叠（Collapse）插件中要用到的事件。这些事件可在函数中当钩子使用。
事件描述实例
show.bs.collapse在调用 show 方法后触发该事件。
$('#identifier').on('show.bs.collapse', function () {
&&&&// 执行一些动作...
shown.bs.collapse当折叠元素对用户可见时触发该事件（将等待 CSS 过渡效果完成）。
$('#identifier').on('shown.bs.collapse', function () {
&&&&// 执行一些动作...
hide.bs.collapse当调用 hide 实例方法时立即触发该事件。
$('#identifier').on('hide.bs.collapse', function () {
&&&&// 执行一些动作...
hidden.bs.collapse当折叠元素对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。
$('#identifier').on('hidden.bs.collapse', function () {
&&&&// 执行一些动作...
下面的实例演示了事件的用法：
&div class=&panel-group& id=&accordion&&
&div class=&panel panel-info&&
&div class=&panel-heading&&
&h4 class=&panel-title&&
&a data-toggle=&collapse& data-parent=&#accordion&
href=&#collapseexample&&
点击我进行展开，再次点击我进行折叠。--shown 事件
&div id=&collapseexample& class=&panel-collapse collapse&&
&div class=&panel-body&&
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident.
Ad vegan excepteur butcher vice lomo.
$(function () {
$('#collapseexample').on('show.bs.collapse', function () {
alert('嘿，当您展开时会提示本警告');})
结果如下所示：
感谢您的支持，我会继续努力的!
扫码打赏，你说多少就多少
记住登录状态
重复输入密码}