Table of Contents
回复讨论(解决方案)
Home Web Front-end HTML Tutorial 左右两边高度自适应,右边宽度为浏览器宽度-200px。这个是怎么理解的呀?_html/css_WEB-ITnose

左右两边高度自适应,右边宽度为浏览器宽度-200px。这个是怎么理解的呀?_html/css_WEB-ITnose

Jun 21, 2016 am 09:28 AM
right width Browser Adaptive


按照图片那样的排版,但是,但是,错了。求正确写法?先谢谢各位啦~~~
不理解右边的那个宽度是怎么写的?还有不知道错了,是不是右边的宽度计算错误了?
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>初试试题</title><style>body {	margin:0px 0px;	padding:0px 0px;	color:#fff; text-align:center;}#header {	background:#0175ed;	height:120px; line-height:120px;}#header, #footer, #container {    margin: 0px auto;    width: 100%;}#contentWrap {    margin-left: -200px;    float:right;    width: 100%;	background:#86aef7}#content {    margin-left: 200px;}#side {    float:left;    width: 200px;	background:#55a3f3;}#contentWrap,#side{	min-height: 500px;	height: auto !important;	height: 500px;}#footer {    clear: both;	background:#0175ed;	height:50px; line-height:50px;}</style></head><body><div id="container"><div id="header">高度120px</div><div id="main"><div id="contentWrap"><div id="content">右边宽度100%-200px</div></div><div id="side">左边宽度200px</div></div><div id="footer">底部高度50px</div></div></body></html>


回复讨论(解决方案)

右边宽度100%-200px


左边宽度200px


--》

右边宽度100%-200px

左边宽度200px


width:100%
position: abusote;
left : 0px;
用padding-left:200px; 来占位吧

右边宽度100%-200px


左边宽度200px


--》

右边宽度100%-200px

左边宽度200px


所以,你这个回复是什么意思呢?








高度 自适应 老的浏览器可能不行 所以要 写js计算把








高度 自适应 老的浏览器可能不行 所以要 写js计算把

右边=浏览器宽度-200px,这个怎么理解的呀?

这样做可以实现以上所说布局

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>初试试题</title><style>body {	margin:0px 0px;	padding:0px 0px;	color:#fff; text-align:center;}#header {	background:#0175ed;	height:120px; line-height:120px;}#header, #footer, #container {    margin: 0px auto;    width: 100%;}#right,#side{	min-height: 500px;	height: auto !important;	height: 500px;}#side {    float:left;    width: 200px;	background:#55a3f3;}#right {  	background:#86aef7}#footer {    clear: both;	background:#0175ed;	height:50px; line-height:50px;}</style></head><body><div id="container">    <div id="header">高度120px</div>    <div id="main">        <div id="side">左边宽度200px</div>		<div id="right">右边宽度100%-200px</div>    </div>    <div id="footer">底部高度50px</div></div></body></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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>初试试题</title><style>body {	margin:0px 0px;	padding:0px 0px;	color:#fff; text-align:center;}#header {	background:#0175ed;	height:120px; line-height:120px;}#header, #footer, #container {    margin: 0px auto;    width: 100%;}#right,#side{	min-height: 500px;	height: auto !important;	height: 500px;}#side {    float:left;    width: 200px;	background:#55a3f3;}#right {  	background:#86aef7}#footer {    clear: both;	background:#0175ed;	height:50px; line-height:50px;}</style></head><body><div id="container">    <div id="header">高度120px</div>    <div id="main">        <div id="side">左边宽度200px</div>		<div id="right">右边宽度100%-200px</div>    </div>    <div id="footer">底部高度50px</div></div></body></html>
是可以实现,但是,我想知道右边的宽度计算。你这个写法不对吧~~~
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undress AI Tool

Undress AI Tool

Undress images for free

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

PHP Tutorial
1517
276
What are the virtual currency trading apps?_The top ten recommended official virtual currency trading apps in 2025 What are the virtual currency trading apps?_The top ten recommended official virtual currency trading apps in 2025 Aug 08, 2025 pm 06:42 PM

1. Binance is known for its huge transaction volume and rich trading pairs. It provides diversified trading models and perfect ecosystems. It also ensures the security of user assets through SAFU funds and multiple security technologies and attaches great importance to compliant operations; 2. OKX Ouyi provides a wide range of digital asset trading services and unified trading account models, actively deploys the Web3 field, and improves transaction security and experience through strict risk control and user education; 3. gate.io Sesame opens the door and has good currency speed and rich currency, provides diversified trading tools and value-added services, adopts multiple security verification mechanisms and adheres to the transparency of asset reserves to enhance user trust; 4. Huobi provides one-stop digital asset services with deep industry accumulation, with strong transaction depth and

Binance Binance Exchange's latest login portal Binance Binance Exchange's latest login portal Aug 08, 2025 pm 10:12 PM

First, download the Binance App through the official channel. 1. Click the official download link provided in the article to download. When encountering the browser security prompt, select "Still to download"; 2. After the download is completed, find the installation package in the notification bar or file manager, click to start the installation and allow the system to authorize it; 3. After the installation is successful, click the desktop icon to open the application, complete the registration and log in and enable secondary verification to ensure account security. The entire process needs to keep the network stable, and it is important to avoid using unofficial channels to ensure the security of assets.

How to solve the problem of 404 online How to solve the problem of 404 online Aug 12, 2025 pm 09:21 PM

How to solve the Internet 404 error: Check whether the URL is correct. Refresh the page. Clear browser cache: Chrome: three dots in the upper right corner &gt; More tools &gt; Clear browsing data &gt; Check "Cached pictures and files" &gt; Clear data Firefox: Three horizontal lines in the upper right corner &gt; Options &gt; Privacy and Security &gt; Clear history &gt; Check "Cache" &gt; Confirm Safari: dish

Succinct (PROVE Coin) Price Forecast: 2025, 2026, 2027-2030 Succinct (PROVE Coin) Price Forecast: 2025, 2026, 2027-2030 Aug 11, 2025 am 10:12 AM

Directory What is Succinct (PROVE) Which venture capital supports Succinct (PROVE)? How Succinct (PROVE) Working Principle SP1zkVM and Prover Network OPSuccinct Technology Cross-chain Verification PROVE Token Economics Token Details 2025, 2026, 2027-2030 Succinct (PROVE) Price Forecast Succinct (PROVE) Price Forecast Succinct (PROVE) Price Forecast: Trading Volume Expansion and Listing Momentum 2025-20

The latest version of the European Exchange app download and installation address 2025 version The latest version of the European Exchange app download and installation address 2025 version Aug 07, 2025 pm 09:48 PM

The European Exchange is a world-leading digital asset service platform, providing users with diverse digital product trading and financial services. Its official application is designed with convenient operation and is committed to creating a safe and stable trading environment for users.

How to download Ouyi OKX mobile version? Download the Ouyi APP on Huawei mobile phone and install it in detail How to download Ouyi OKX mobile version? Download the Ouyi APP on Huawei mobile phone and install it in detail Aug 11, 2025 am 10:00 AM

How to download the Ouyi OKX mobile version? Complete tutorial for installing Ouyi APP for Huawei mobile phones Log in for the first time Ouyi OKXAPP operation guide Account security settings Detailed explanation of Google Authenticator binding steps Ouyi APP interface function introduction Summary As digital asset trading continues to heat up, Ouyi OKX, as an internationally renowned cryptocurrency trading platform, its official mobile application has become the core tool for global users to view markets, manage assets and trade operations. For users who use Huawei equipment, mastering the correct and safe Ouyi OKXAPP download and installation process is the primary step in entering the digital currency field. This article will provide you with a detailed operating guide for installing the Ouyi APP on Huawei mobile phones, helping you to successfully open the additional

How can a 10,000 yuan principal be rolled into millions in the currency circle? These five steps are indispensable! How can a 10,000 yuan principal be rolled into millions in the currency circle? These five steps are indispensable! Aug 12, 2025 pm 07:03 PM

In the wave of digital currency, turning ten thousand principal into one million sounds like a fantasy, but for participants who have mastered the correct methodology, this is not a completely impossible path. This process is full of risks and challenges. What it requires is not the fantasy of getting rich overnight, but a set of rigorous and systematic operating strategies. Every step of this journey is linked together and forms the core driving force from quantitative change to qualitative change. The following five steps depict such a thorny but possible path to success.

What is Ecocoin (EOS)? EOS Market Analysis and Price Forecast 2025-2030 What is Ecocoin (EOS)? EOS Market Analysis and Price Forecast 2025-2030 Aug 14, 2025 pm 12:03 PM

Table of Contents What is EOS? Project Background Project Category 1. Smart Contract Layer-1 Infrastructure 2. Delegated Proof of Stake (DPoS) Ecosystem 3. Web3dApp and Developer Ecosystem Strategies Outlook Market Analysis Price Analysis Price Forecast: EOS2025-203025 Forecast 2026 Forecast 2027 Forecast 2028-2030 Forecast Price Forecast Table Project Overview FAQ Conclusion Since its ambitious launch, EOS.IO is recognized as one of the most technologically advanced blockchain platforms, aiming to solve the scalability faced by traditional networks like Ethereum

See all articles