HTML子div的宽度始终等于父div的宽度

最近我在做个人网页的时候,在一个div下插入了百度地图的API,这时问题来了,因为百度地图生成的是固定的大小,假如网页用手机端打开,会发现有部分地图看不到,为了解决这个问题,我把子div的宽度始终等于父div的宽度,这时就正常了

代码:

<div id="bigone">

<div style="height:490px;border:#ccc solid 1px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;" id="dituContent"></div>

</div>

时间: 2024-10-16 14:34:04

HTML子div的宽度始终等于父div的宽度的相关文章

子div margin-top bottom转移到父div

嵌套div中margin-top转移问题的解决办法 在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-bottom的值会“转移”给外层div. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&

子元素div高度不确定时父div高度如何自适应

粘自:http://www.jb51.net/css/110652.html 在最外层div加以下样式 height:100%; overflow:hidden; 其它方法: Div即父容器不根据内容自适应高度,我们看下面的代码: 代码如下: <div id="main"> <div id="content"></div> </div> 当Content内容多时,即使main设置了高度100%或auto.在不同浏览器下

任意长宽度子div在任意长宽度父div垂直水平居中

<DocType html><html>    <head>        <title>任意长宽度高度垂直水平居中div</title>        <style>            .parentDiv{                width:500px;<!-- 长宽可以改变-->                height:500px;                margin:0 auto;     

文字或是子div在父div里垂直居中

只有一行文字的话,直接用line-hight可以解决. 有多行文字或是想要子div在父div里垂直居中: 首先要理解vertical-align: middle只在table属性中才会垂直居中,应用到display:inline-block元素的话就是和隔壁元素居中对齐. 方法一: 在div里增加一个隐藏子元素,高度为100%和父div一样,这样再设置vertical-align: middle的话子div就会和父div一样高的子元素垂直居中对齐. <style> .box{ float: l

子DIV浮动(float)后父DIV高度自动失效解决方案

高度的自适应(父div高度随子div的高度改变而改变): 1.如果父div不定义height.子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改变. 2.如果父div定义height,子div均为标准流的时候,在IE下父div的height随内容变化而变化,如父div设置height:50px 如下所示,子元素div 本身具有高度和宽度,但由于其具有float:left属性后,其父元素div不具有高度. <html> <head&

子元素使用position:fixed,导致他的宽度不能和父元素保持一致的解决方案

最近在编码过程中,遇到过这样一个问题,代码如下,我们有一个父级,他有一定的宽度,在他的里面有两个子级,其中一个是绝对定位的,且要求他们的宽度都和父级保持一致,然后问题就出现了,我们会发现,有了定位的son他的宽度远远的超出了我们父级的宽度,那么问题是怎么引起的呢? <div class="fathor" style="width:1024px"> <div class="son" style="position:fix

div随内容调整高度(父元素高度随子元素变化)

你就说我的头像是不是很酷,很有个性? 嗯嗯,帅的不行了呢!你吃饭了吗??????????????????????????????? .message { width: 100%; padding-top: 12px } .message .icon { position: relative; display: block; padding: 0px; height: 44px; width: 44px; float: left } .message .icon.user { margin-lef

子div块中设置margin-top时影响父div块位置的解决办法

在css中设置样式时,通常会遇到用子div块margin中设置margin-top时,父div块中就会随着子div的margin-top,也会和子div执行相同的margin-top的位置样式 解决办法1: 若子div块中使用margin-top,则在父div块中添加:overflow:hidden; 解决办法2: 若由于特殊情况不能在父div块中添加:overflow:hidden,那么在子div块中用padding-top代替margin-top;

CSS+DIV:父DIV相对定位+子DIV绝对定位

如何在一个div内将一个div进行绝对定位呢?很简单,把父div的position属性设为relative,子div的position属性设为absolute就可以了... 示例: <html> <body> <div>xxxxx<div> <div style="border:1px red solid;width:100%;height:50px;position:relative"> <div style=&quo