javascript - 如何调整页面边框 HTML/CSS

Question

我最近开始学习 HTML 和 CSS，并通过制作自己的 CV 进行练习。

目前，我在使页面边框与正文内容一致方面遇到了问题。我已经调整了正文和里面所有内容的大小以适应 1210 像素，但我无法设法让页面达到那个大小。我怀疑这无法完成，因为除非我使用边距并将所有内容居中，否则页面将始终看起来像那样。抱歉，问题描述不当，如果您只看屏幕截图，会更容易看出问题!我使用 CSS 中的“*”使我所有的边框都显示为红色。如您所见，页面超出了边界!

我的CSS代码如下:

*
{
    border: red dashed 1px;
}


html {
    width: 1210px;
}

h3 {
    position: relative;
    left: 10px;
    width: 400px;
}

h4 {
    position: relative;
    left: 10px;
    width: 400px;
}

h5 {
    position: relative;
    left: 10px;
    width: 500px;
}
li {
    width: 800px;
}
 #phoneNumber {
 position: relative;
        left: 950px;
        top: -110px;
        font-family: monospace;
        text-decoration:blink;
        color: black;
        width: 200px;
 }

 #emailaddress {
        position: relative;
        left: 630px;
        top: -150px;
        font-family: monospace;
        text-decoration:blink;
        color: black;
 }


#phoneIcon 
{
    position: relative;
    height: 50px;
    width: 50px;
    left: 617px;
    top: -60px;
}

#emailIcon
{
    position: relative;
    height: 50px;
    width: 50px;
    left: 670px;
    top: -130px;

}

body{
    background-color: #C4D2E0;
    width: 1210px;
    margin: 0px;
    padding: 0px;
}

div {
    margin: 5px;
    border-color: blue;
    border-width: thin;
    border-style: solid;
    width: 1200px;
}
span {
    font-style: italic;
    font-weight: 300;
    position: relative;
    left: 10px;
}

#header {

border-width: thin;
border-color:  blue;
border-style: solid;

background-color:#6B8FB2;
position: relative;
height: 250px;
text-align: center;
font-family: monospace;
font-style: oblique;
text-align: justify;
width: 1200px;

}

 #aboutmeDiv
 {
     position: relative;
     max-width: 1100px;
     left: 210px;
     top: -250px;
     margin-right: 800px;
     border-style: dashed green 1px;
     border-width: 0px;
     width: 500px;
 }

.aboutme{

    position: relative;
    left: 10px;
    margin-right: 0px;
    width: 450px;

}

#header h1 {
    position: relative;
    left: 20px;
    top: 4px;
    margin-right: 100px;
    border:0px;
}

#profilePic{

 position: relative;
 left: 15px;
 top: -10px;
 border-color: blue;
 border-width: thin; 
 border-style: solid;
}

#skills{

}

#education{

}

#workexperience{
}

#projects{
}

#volunteering {
}

#footer {
height: 50px;
background-color:#6B8FB2;
border-width: thin;
border-color:  blue;
border-style: solid;
width: 1200px;


text-align: center;

}

#verticalLine
{
    position: absolute;
    width: 0px;
    height: 120px;
    left: 800px;
    top: 70px;
    border-color: blue;
    border-width: thin;
    border-style: solid;

}

我的 HTML 代码在这里:

 <div id = "skills">
 <h3> Skills:</h3>
 <ul>
 <li>Experience in digital IC design (using ModelSim, Synplify, ispLever etc.).
 <li>Experience in C, C#, Java, SystemVerilog and Assembly programming.</li>
 <li>Experience in programming PIC, ARM and Atmel Microcontrollers.</li>
 <li>Experience in Android app development.</li>
 <li>Strong team worker and adaptable.</li>
 <li>Strong analytical and problem solving skills.</li> 
 <li>Fluency in English, Arabic and Norwegian.</li>
</li></ul>
 </div >

 <div id = "education">
 <h3> Education:</h3>
 <h4><span></span>University of Southampton (ECS)<span></span></h4>
 <h5>MEng Electronic Engineering with Nanotechnology – 2:1 (Honours)
</h5>
<ul>
<li> Fourth year group design project: Spectrum Sensing Using Imagination Technologies UCC
Communications Platform.</li> <!--Itlics-->
<li>Relevant Modules:
C and C# programming, SystemVerilog, Computer Architecture, Digital System Design, Digital Circuits & Microprocessors, 
Design & Test of Digital Systems, Electronic Design, Software Development and Computer Systems Engineering.</li>
</ul>
 <h4><span>Richmond-upon-Thames College, London</span></h4>
 <h5>BTEC National Diploma in Engineering (Triple Distinction). <p></p>AS Level Mathematics (A).</h5>

 </div>

 <div id = "workexperience">
 <h3>Work Experience:</h3>
 <h4><span>Cafe Parfait, Southampton</span></h4>
 <h5>Events Manager (August 2013 – December 2013)</h5>
 <ul>
 <li>Worked with the general manager to design and run a night out for the club.</li>
 <li>Responsible for the employment and day-to-day management of a team of
promoters (10 members).</li>
<li>Was responsible for the promotion of the club in general and the night out.</li>
 </ul>

 <h4></h4><span>SPI Lasers, Southampton</span></h4>
 <h5>Electronic Engineering Intern (July 2012 – October 2012)</h5>
 <ul>
 <li>Characterization and testing of the electronic (low cost) seed boards to ensure new lasers were up to standard.</li>
 <li>Designed a PID controller for a thermoelectric cooler (in C) that was subsequently used in the final products.</li>
 <li>Researched and documented ways of detecting the catastrophic optical damage in order to fix lasers being used in the field.</li>
 <li>Worked with supervisors, engineers and sales staff to achieve the required sales targets as well as develop a new range of low cost lasers.</li>
 </ul>

 <h4><span>Laura Ashley, London</span></h4>
 <h5>Sales Assistant (June 2011 – October 2011)</h5>
 <ul>
 <li>Served the customers and provided product information.</li>
 <li>Represented the company while selling the products provided at the flagship
store.</li>
<li>Helped with the set up of a new flagship store from the ground up.</li>
 </ul>
 </div>

 <div id = "projects">
 <h3>Projects:</h3>
<ul>
<li>Designed a CORDIC processor (SystemVerilog).</li>
<li>Designed a lift controller (implemented on an FPGA using SystemVerilog).</li>
<li>Designed a four-bit multiplied (implemented on a CPLD using SystemVerilog).</li>
<li>Designed a Tune generator (implemented on a PLD using SystemVerilog).</li>
<li>Developed image processing software for medical diagnosis (in C#).</li>
<li>Implemented several cognitive radio algorithms  Imagination Technologies MCP processor using assembly language.</li>
<li>Worked on the design, construction and programming (in C) of a football playing robot.</li>
<li>Designed two different sequence recognizers to be part of a digital IC.</li>
<li>Independently developed a twitter like social media Android application called Yamba.</li>
<li>Developed an Android application to control a custom-made LED cube in 48 hours (during the EMECS-thon competition).</li>
</ul>   
 </div>

 <div id = "volunteering">
 <h3>Volunteering:</h3>
 <h4><span>University of Southampton</span></h3>
 <h5>Opinions Editor for WessexScene Magazine (October 2011-June 2012)</h5>
 <ul>
 <li>Managed a team of writers and edit their work before publishing.</li>
 <li>Wrote several articles to be published on paper and online (on a range of
topics directly affecting the student population).</li>
<li>Promoted the magazine through social media and distribution.</li>
 </ul>
 </div>

 <div id = "footer">
 <p></p>
 </div>

  </body>
</html>

更新:看第二张截图!

最后更新:看第三张截图!

Answer 1

如果你想让正文填充页面的可用宽度，你可以这样做:

html, body{
    width:100%;
}